页面右上角可伸缩关闭的菜单特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是页面右上角可伸缩关闭的菜单特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="JS代码,菜单导航,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为页面右上角可伸缩关闭的菜单，属于站长常用代码" />
<title>页面右上角可伸缩关闭的菜单</title>
<link rel=stylesheet type=text/css href="js/comun.css">
<script type=text/javascript src="js/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>
</body>
</html>

CSS代码(comun.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(../images/opciones.gif) no-repeat 0px 0px;HEIGHT:43px;TOP:0px;CURSOR:pointer;RIGHT:0px}
#settings:hover{BACKGROUND:url(../images/opciones.gif) no-repeat 0px -86px}
.cerrar{BACKGROUND:url(../images/opciones.gif) no-repeat 0px -43px!important;}

附件:下载该文件资源,减少时间成本(增值服务)