以下是 jquery卷帘式导航栏js代码 的示例演示效果:
部分效果截图:
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" />
<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="#">��ҳ</a>
<ul style="display: none;">
<li><a>�������дһЩ����������վ�Ļ���</a></li>
</ul>
</li>
<li><a href="#">��Ŀ��</a>
<ul style="display: none;">
<li style="width: 30px;"></li>
<li><a href="#">����Ŀ</a></li>
<li><a href="#">����Ŀ</a></li>
<li><a href="#">����Ŀ</a></li>
<li><a href="#">����Ŀ</a></li>
<li><a href="#">����Ŀ</a></li>
</ul>
</li>
<li><a href="#">��Ŀ��</a>
<ul style="display: none;">
<li style="width: 30px;"></li>
<li><a href="#">����Ŀ</a></li>
<li><a href="#">����Ŀ</a></li>
<li><a href="#">����Ŀ</a></li>
<li><a href="#">����Ŀ</a></li>
<li><a href="#">����Ŀ</a></li>
<li><a href="#">����Ŀ</a></li>
<li><a href="#">����Ŀ</a></li>
<li><a href="#">����Ŀ</a></li>
<li><a href="#">����Ŀ</a></li>
<li><a href="#">����Ŀ</a></li>
</ul>
</li>
<li><a href="#">
<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="#">��Ŀ��</a>
<ul style="display: none;">
<li style="width: 280px;"></li>
<li><a href="#">����Ŀ</a></li>
<li><a href="#">����Ŀ</a></li>
</ul>
</li>
<li><a href="#">��Ŀ��</a>
<ul style="display: none;">
<li style="width: 325px;"></li>
<li><a href="#"><b>����Ŀ</b></a></li>
<li><a href="#">����Ŀ</a></li>
</ul>
</li>
<li><a href="#">��Ŀ��</a>
<ul style="display: none;">
<li style="width: 380px;"></li>
<li><a href="#">����Ŀ</a></li>
<li><a href="#">����Ŀ</a></li>
<li><a href="#">����Ŀ</a></li>
<li><a href="#">����Ŀ</a></li>
</ul>
</li>
<li><a href="#">��Ŀ��</a>
<ul style="display: none;">
<li style="width: 440px;"></li>
<li><a>����д��һ�ι��������Ŀ��������</a></li>
</ul>
</li>
<li><a href="#">��Ŀ��</a>
<ul style="display: none;">
<li style="width: 520px;"></li>
<li><a>���������</a></li>
</ul>
</li>
<li><a href="#">��Ŀʮ</a>
<ul style="display: none;">
<li style="width: 590px;"></li>
<li><a>����д��һ�ι��������Ŀ��������</a></li>
</ul>
</li>
<li><a href="#">��Ŀʮһ</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
分享到微博
微信扫一扫
