您的位置：首页 > Web前端 > JQuery

Jquery打造网页右上角可伸缩关闭的菜单

2011-06-23 09:52 302 查看
代码简介：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
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航