以下是 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=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>jquery顶部固定层下拉导航</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/nav.js"></script>
</head>
<body>
<div id="top_bg">
<div class="top">
<a class="logo_l" href="/" title="返回首页"></a>
<!--导航开始-->
<div class="nav_z">
<ul id="navul" class="cl">
<li>
<a href="#">新闻</a>
<ul>
<li><a href="#">企业文化</a></li>
<li><a href="#">企业资质</a></li>
<li><a href="#">服务团队</a></li>
</ul>
</li>
<li>
<a href="#">视频</a>
<ul>
<li><a href="#">企业文化</a></li>
<li><a href="#">企业资质</a></li>
<li><a href="#">服务团队</a></li>
</ul>
</li>
<li>
<a href="#">音乐</a>
<ul>
<li><a href="#">企业文化</a></li>
<li><a href="#">企业资质</a></li>
<li><a href="#">服务团队</a></li>
</ul>
</li>
<li>
<a href="#">图片</a>
<ul>
<li><a href="#">企业文化</a></li>
<li><a href="#">企业资质</a></li>
<li><a href="#">服务团队</a></li>
</ul>
</li>
<li>
<a href="#">购物</a>
<ul>
<li><a href="#">企业文化</a></li>
<li><a href="#">企业资质</a></li>
<li><a href="#">服务团队</a></li>
</ul>
</li>
<li>
<a href="#">小说</a>
<ul>
<li><a href="#">企业文化</a></li>
<li><a href="#">企业资质</a></li>
<li><a href="#">服务团队</a></li>
</ul>
</li>
<li>
<a href="#">社区</a>
<ul>
<li><a href="#">企业文化</a></li>
<li><a href="#">企业资质</a></li>
<li><a href="#">服务团队</a></li>
</ul>
</li>
<li>
<a href="#">笑话</a>
<ul>
<li><a href="#">企业文化</a></li>
<li><a href="#">企业资质</a></li>
<li><a href="#">服务团队</a></li>
</ul>
</li>
<li>
<a href="#">游戏</a>
<ul>
<li><a href="#">企业文化</a></li>
<li><a href="#">企业资质</a></li>
<li><a href="#">服务团队</a></li>
</ul>
</li>
<li>
<a href="#">更多</a>
<ul>
<li><a href="#">企业文化</a></li>
<li><a href="#">企业资质</a></li>
<li><a href="#">服务团队</a></li>
</ul>
</li>
<!--可在此处直接添加导航-->
</ul>
</div><!--导航结束-->
<script type="text/javascript">
$(".navbg").capacityFixed();
</script>
</div>
</div>
</body>
</html>
JS代码(nav.js):
/**author:Null*DATE:2013.5.24*/
$(function(){
//头页登录$("#navul > li").not(".navhome").hover(function(){
$(this).addClass("navmoon")}
,function(){
$(this).removeClass("navmoon")}
);
}
);
(function($){
$.fn.capacityFixed = function(options){
var opts = $.extend({
}
,$.fn.capacityFixed.deflunt,options);
var FixedFun = function(element){
var top = opts.top;
element.css({
"top":top}
);
$(window).scroll(function(){
var scrolls = $(this).scrollTop();
if (scrolls > top){
if (window.XMLHttpRequest){
element.css({
position:"fixed",top:0}
);
}
else{
element.css({
top:scrolls}
);
}
}
else{
element.css({
position:"absolute",top:top}
);
}
}
);
element.find(".close-ico").click(function(event){
element.remove();
event.preventDefault();
}
)}
;
return $(this).each(function(){
FixedFun($(this));
}
);
}
;
$.fn.capacityFixed.deflunt={
right:0,//相对于页面宽度的右边定位 top:0}
;
}
)(jQuery);
CSS代码(style.css):
@charset "utf-8";/* CSS Document */
html,*,body,div,ul,ol,li,h1,h2,h3,h4,h5,h6,p,span{margin:0;padding:0;}
body{font-family:"微软雅黑",Arial,Helvetica,sans-serif;color:#666666;line-height:25px;font-size:14px;background:#f2f2f2 url(../images/bg.gif) repeat-x left top;height:2000PX;}
img{vertical-align:middle;}
em{font-style:normal;}
a img,:link img,:visited img{border:0;}
a:link,a:visited{text-decoration:none;color:#666666;}
a:hover,a:focus{text-decoration:underline;color:#0573bd;text-decoration:none;}
ul,ul li{list-style-type:none;}
#top_bg{height:40px;width:100%;background:#333;box-shadow:1px 1px 7px #999;position:fixed;z-index:999;left:0;border-bottom:#C6C6C6 solid 1px;}
.top{width:1640px;height:40px;margin:0 auto;}
.top .logo_l{width:145px;height:40px;float:left;background:url(../images/logo.png) no-repeat left;}
.nav_z{width:auto!important;height:40px;float:left;position:relative;z-index:999;}
#navul li{float:left;width:80px;height:40px;position:relative;text-align:center;line-height:40px;}
#navul li a:link,#navul li a:visited{color:#FFF;font-weight:500;letter-spacing:2px;}
#navul li ul{display:none;position:absolute;z-index:999;background:#e6e6e6;border:#c6c6c6 1px solid;border-bottom:none;left:-1px;}
#navul li ul li{display:block;width:78px;float:none;height:35px;position:relative;line-height:35px;border-bottom:#C6C6C6 1px solid;font-size:12px;overflow:hidden}
#navul li.navmoon{background:#E6E6E6;border:#C6C6C6 1px solid;width:78px;height:38px;line-height:38px;}
#navul li.navmoon a{color:#404a58;}
#navul li.navhome a:hover{color:#FCFF00;}
#navul li.navmoon ul{display:block;}
#navul li.navmoon ul a{display:block;width:78px;height:35px;line-height:35px;}
#navul li.navmoon ul a:hover{color:#0573bd;background:#FFF;}
分享到QQ
分享到微博
微信扫一扫
