zoukankan      html  css  js  c++  java
  • Jquery打造网页右上角可伸缩关闭的菜单

    代码简介:Jquery打造网页右上角可伸缩关闭的菜单

    代码内容:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Jquery打造网页右上角可伸缩关闭的菜单_网页代码站(www.webdm.cn)</title>
    
    <style type=text/css>
        #opciones {
    	Z-INDEX: 7000; POSITION: fixed; PADDING-BOTTOM: 10px; PADDING-LEFT: 10px; WIDTH: 120px; PADDING-RIGHT: 10px; FONT: 12px/140% Arial, Helvetica, sans-serif; 
    
    BACKGROUND: #e7e7e7; COLOR: #999; TOP: 0px; RIGHT: 0px; PADDING-TOP: 10px
    }
    #opciones H2 {
    	BORDER-BOTTOM: #fff 1px solid; PADDING-BOTTOM: 3px; MARGIN: 0px 0px 3px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; COLOR: #666; FONT-SIZE: 16px; PADDING-TOP: 0px
    }
    #opciones H3 {
    	PADDING-BOTTOM: 0px; TEXT-INDENT: 0px; MARGIN: 3px 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; HEIGHT: 15px; COLOR: #666666; PADDING-TOP: 0px
    }
    #opciones P {
    	FONT-SIZE: 12px
    }
    #opciones A {
    	COLOR: #999; TEXT-DECORATION: none
    }
    #opciones A:hover {
    	BACKGROUND: #666666; COLOR: #fff
    }
    #settings {
    	Z-INDEX: 8000; POSITION: fixed; TEXT-INDENT: -99999px; WIDTH: 43px; DISPLAY: block; BACKGROUND: url(http://www.webdm.cn/images/20100919/opciones.gif) no-repeat 0px 
    
    0px; HEIGHT: 43px; TOP: 0px; CURSOR: pointer; RIGHT: 0px
    }
    #settings:hover {
    	BACKGROUND: url(http://www.webdm.cn/images/20100919/opciones.gif) no-repeat 0px -86px
    }
    .cerrar {
    	BACKGROUND: url(http://www.webdm.cn/images/20100919/opciones.gif) no-repeat 0px -43px!important;
    }
    
    </style>
    <SCRIPT type=text/javascript src="http://www.webdm.cn/images/20100919/jquery-1.3.2.min.js"></SCRIPT>
    <SCRIPT type=text/javascript>
    $(document).ready(function(){
      $('#opciones').hide();
    			$('#settings').click(function(){
    				$('#opciones').slideToggle();
    				$(this).toggleClass("cerrar");
    		
        });
      });
    </SCRIPT>
    </head>
    <body style="text-align:center">
    
    <DIV id=settings>Settings</DIV>
    <DIV id=opciones>
      <p>网页代码站</p>
      <p>网页代码站</p>
      <p>网页代码站</p>
      <p>网页代码站</p>
      <p>网页代码站</p>
      <p>网页代码站</p>
      <p>网页代码站</p>
      <p>网页代码站</p>
      <p>网页代码站</p>
      <p>网页代码站</p>
      <p>网页代码站</p>
      <p>网页代码站</p>
      <p>网页代码站</p>
      <p>网页代码站</p>
      <p>网页代码站</p>
      <p>网页代码站</p>
      <p>网页代码站</p>
      <p>网页代码站</p>
      <p>网页代码站</p>
      <p>网页代码站</p>
      <p>网页代码站</p>
      <p>网页代码站</p>
      <p>网页代码站</p>
      <p>网页代码站</p>
    </DIV>
    <p></p>
    </body>
    </html>
    <br>
    <p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!</p>
    

    代码来自:http://www.webdm.cn/webcode/62032726-0748-4d76-ab83-f75c08dc7d4e.html

  • 相关阅读:
    Java中符号位扩展
    BZOJ2754: [SCOI2012]喵星球上的点名(AC自动机)
    BZOJ1030: [JSOI2007]文本生成器(AC自动机)
    BZOJ2434: [Noi2011]阿狸的打字机(AC自动机 树状数组)
    BZOJ1432: [ZJOI2009]Function(找规律)
    BZOJ2659: [Beijing wc2012]算不出的算式(数学)
    洛谷P3796 【模板】AC自动机(加强版)
    洛谷P3966 [TJOI2013]单词(AC自动机)
    BZOJ2580: [Usaco2012 Jan]Video Game(AC自动机)
    后缀自动机经典操作
  • 原文地址:https://www.cnblogs.com/webdm/p/2087810.html
Copyright © 2011-2022 走看看