以下是 jQuery卷帘式菜单栏特效代码 的示例演示效果:
部分效果截图:
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="此代码内容为jQuery卷帘式菜单栏，属于站长常用代码" />
<title>jQuery卷帘式菜单栏</title>
<link href="css/menu.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="js/nav.js" type="text/javascript"></script>
</head>
<body>
<!-- 代码 开始 -->
<div class="nav">
<div class="navmain">
<ul id="nav_all">
<li><a href="http://www.baidu.com/">首页</a>
<ul style="display: none;">
<li><a>这里可以写一些用于描述网站的话。</a></li>
</ul>
</li>
<li><a href="http://www.baidu.com/">栏目二</a>
<ul style="display: none;">
<li style="width: 30px;"></li>
<li><a href="http://www.baidu.com/">子栏目</a></li>
<li><a href="http://www.baidu.com/">子栏目</a></li>
<li><a href="http://www.baidu.com/">子栏目</a></li>
<li><a href="http://www.baidu.com/">子栏目</a></li>
<li><a href="http://www.baidu.com/">子栏目</a></li>
</ul>
</li>
<li><a href="http://www.baidu.com/">栏目三</a>
<ul style="display: none;">
<li style="width: 30px;"></li>
<li><a href="http://www.baidu.com/">子栏目</a></li>
<li><a href="http://www.baidu.com/">子栏目</a></li>
<li><a href="http://www.baidu.com/">子栏目</a></li>
<li><a href="http://www.baidu.com/">子栏目</a></li>
<li><a href="http://www.baidu.com/">子栏目</a></li>
<li><a href="http://www.baidu.com/">子栏目</a></li>
<li><a href="http://www.baidu.com/">子栏目</a></li>
<li><a href="http://www.baidu.com/">子栏目</a></li>
<li><a href="http://www.baidu.com/">子栏目</a></li>
<li><a href="http://www.baidu.com/">子栏目</a></li>
</ul>
</li>
<li><a href="http://www.baidu.com/">
<div style="_margin-top: 12px;"></div>
栏目四</a>
<ul style="display: none;">
<li style="width: 120px;"></li>
<li><a>别的栏目若没有子栏目，也可以写一些描述性的话。</a></li>
</ul>
</li>
<li><a href="http://www.baidu.com/">栏目五</a>
<ul style="display: none;">
<li style="width: 280px;"></li>
<li><a href="http://www.baidu.com/">子栏目</a></li>
<li><a href="http://www.baidu.com/">子栏目</a></li>
</ul>
</li>
<li><a href="http://www.baidu.com/">栏目六</a>
<ul style="display: none;">
<li style="width: 325px;"></li>
<li><a href="http://www.baidu.com/"><b>子栏目</b></a></li>
<li><a href="http://www.baidu.com/">子栏目</a></li>
</ul>
</li>
<li><a href="http://www.baidu.com/">栏目七</a>
<ul style="display: none;">
<li style="width: 380px;"></li>
<li><a href="http://www.baidu.com/">子栏目</a></li>
<li><a href="http://www.baidu.com/">子栏目</a></li>
<li><a href="http://www.baidu.com/">子栏目</a></li>
<li><a href="http://www.baidu.com/">子栏目</a></li>
</ul>
</li>
<li><a href="http://www.baidu.com/">栏目八</a>
<ul style="display: none;">
<li style="width: 440px;"></li>
<li><a>这里写下一段关于这个栏目的描述。</a></li>
</ul>
</li>
<li><a href="http://www.baidu.com/">栏目九</a>
<ul style="display: none;">
<li style="width: 520px;"></li>
<li><a>相关描述。</a></li>
</ul>
</li>
<li><a href="http://www.baidu.com/">栏目十</a>
<ul style="display: none;">
<li style="width: 590px;"></li>
<li><a>这里写下一段关于这个栏目的描述。</a></li>
</ul>
</li>
<li><a href="http://www.baidu.com/">栏目十一</a>
<ul style="display: none;">
<li style="width: 680px;"></li>
<li><a>这里是一段比较长的描述。</a></li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
JS代码(nav.js):
$(function (){
var st = 180;
$('#nav_all>li').mouseenter(function (){
$(this).find('ul').stop(false,true).slideDown(st);
}
).mouseleave(function (){
$(this).find('ul').stop(false,true).slideUp(st);
}
);
}
);
CSS代码(menu.css):
div,ul,li{margin:0;padding:0;border:0;}
ul,li{list-style-type:none;text-transform:capitalize;}
.nav{font-size:12px;width:978px;margin:10px auto 0;border:#E6E6E6 solid 1px;border-bottom:#639ACA solid 1px;height:42px;line-height:42px;position:relative;z-index:1;}
.nav a{text-decoration:none;}
.navmain{height:42px;padding:0 5px;background:#FFF url(../images/nav-bg.png) repeat-x 0 top;position:relative;}
#nav_all{height:42px;float:left;line-height:42px;position:relative;z-index:222;}
#nav_all li{text-align:center;float:left;}
#nav_all li a{color:#639ACA;display:inline-block;font-size:14px;font-weight:bold;cursor:pointer;padding:0 11px 0 12px;_padding:0 8px;height:42px;line-height:42px;white-space:nowrap;}
#nav_all li a:hover{background:url(../images/bird.png) center 33px no-repeat;height:38px;line-height:38px;border-top:4px solid #639ACA;overflow:hidden;}
#nav_all li ul{display:none;position:absolute;z-index:99;width:980px;left:-6px;top:43px;}
#nav_all ul li{background-image:none;line-height:32px;height:32px;padding-top:0px;padding:0;}
#nav_all ul li a{background-image:none;padding:0px 10px;margin:0px;height:32px;line-height:32px;color:#fff;font-weight:normal;background:#639ACA;border:none;}
#nav_all ul li a:hover{background-image:none;padding:0px 10px;margin:0px auto;height:32px;line-height:32px;color:#FFF;background:#639ACA;border-top:none;}
分享到QQ
分享到微博
微信扫一扫
