以下是 w3cfuns网站jquery导航条特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>w3cfuns网站jquery导航条</title>
<style>
body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div,dl,dt,dd,input{margin:0;padding:0;}
body{font-size:12px; font-family: verdana,Microsoft YaHei,Tahoma,sans-serif;}
img{border:none;}
li{list-style:none;}
input,select,textarea{outline:none;}
textarea{resize:none;}
a{text-decoration:none;}
/*清浮动*/
.clearfix:after{content:"";display:block;clear:both;}
.clearfix{zoom:1;}
.fl{ float:left;}
.fr{ float:right;}
/*nav*/
.bg{ background:#333; width:100%; height:20px; height: 55px;position: fixed; _position: absolute;}
.nav{ font-size:14px; width: 1220px; margin:0 auto; }
.nav h2{ overflow: hidden;position: relative; margin-right: 20px;padding: 0 20px 0 0;}
.nav ul.w3cnav>li{ display:inline; overflow: hidden; position: relative;}
.nav ul.w3cnav>li>a{padding: 0 15px; display:inline-block; color:#DDD; line-height:55px; height: 55px; text-align:center;}
.nav ul.w3cnav li.nvmore{ cursor:pointer; padding: 0 25px 0 15px; display:inline-block; color:#DDD; line-height:55px; height: 55px; text-align:center; background:url(http://www.w3cfuns.com/resource/images/extend/hdbg.png) no-repeat 49px 27px; position:relative; overflow:visible;}
.nav ul.w3cnav li.nvmore.hover{color:#333; border-left:1px solid #333; border-right:1px solid #333; background:#fff url(http://www.w3cfuns.com/resource/images/extend/hdbg.png) no-repeat -35px 27px;}
.nav li.nvmore ul.sl{ position: absolute;top: 46px;left: -1px;width: 200px;border: 1px solid #333;background: #fff;z-index: 2;border-top-width: 0; display:none;}
.nav li.nvmore ul.sl li{ height:30px; width:50px; line-height:30px; text-align:center; font-size:12px;}
.nav li.nvmore ul.sl li a{ color:#333;}
.nav li.nvmore ul.sl li a:hover{ color:#05A;text-decoration: underline;}
.nav ul.w3cnav i{ background:url(http://www.w3cfuns.com/resource/images/extend/hdbg.png) no-repeat 0 -42px; position:absolute; left:50%; bottom:-9px;margin-left:-7px;width: 12px;height: 6px; font-style: normal; font-size:0; }
.nav ul.w3cnav .active i{bottom:0px;}
.nav ul.cl li{ font-size:12px;}
.nav ul.cl li a{ display:inline-block; color:#DDD; line-height:55px; height: 55px; padding: 0 8px; }
</style>
<script src="js/jquery.min.js"></script>
<script>
$(function(){
var $nvmore=$('.nvmore');
var $w3cnav=$('.w3cnav');
var $nav_li=$('.w3cnav>li').not('.nvmore');
var $nav_a=$nav_li.find('a');
var index=$nav_li.index('.active');
var timer=null;
function sl_show(){
clearInterval(timer);
$nvmore.addClass('hover')
.find('ul').css({'display':'block'});
}
function sl_hide(){
timer=setInterval(function(){
$nvmore.removeClass('hover')
.find('ul').css({'display':'none'});
},1000);
}
$nvmore.mouseover(function(){
sl_show();
})
$nvmore.mouseout(function(){
sl_hide();
})
$nav_a.mouseover(function(){
$(this).parent().siblings('li').find('i')
.stop(true,true)
.animate({bottom:'-9px'},'fast');
$(this).next('i').animate({bottom:'0px'});
}).mouseout(function(){
$(this).parent().siblings('li').find('i').stop(true,true);
$nav_li.not('.active').find('i').animate({bottom:'-9px'},'fast');
}).click(function(){
index=$nav_li.index($(this).parent());
$nav_li.eq(index).addClass('active')
.siblings().removeClass('active');
});
$w3cnav.mouseleave(function(){
$(this).find('i').stop(true,true);
$nav_li.not('.active').find('i').animate({bottom:'-9px'},'fast');
var v_bottom=parseInt($nav_li.eq(index).find('i').css('bottom'));
if(v_bottom!=0){
$nav_li.eq(index).find('i').animate({bottom:'0px'},'fast');
}
})
});
</script>
</head>
<body>
<div class="bg">
<div class="nav clearfix">
<h2 class="fl"><a href="#"><img src="images/w3cfuns_logo_hd.png" /></a></h2>
<ul class="fl w3cnav">
<li class="fl active"><a href="#">首页</a><i></i></li>
<li class="fl"><a href="#">前端</a><i></i></li>
<li class="fl"><a href="#">技术</a><i></i></li>
<li class="fl"><a href="#">笔记</a><i></i></li>
<li class="fl"><a href="#">问问</a><i></i></li>
<li class="fl"><a href="#">教程</a><i></i></li>
<li class="fl"><a href="#">资源</a><i></i></li>
<li class="fl"><a href="#">招聘</a><i></i></li>
<li class="fl"><a href="#">家园</a><i></i></li>
<li class="fl nvmore">更多<em></em>
<ul class="sl">
<li class="fl"><a href="#">帮派</a></li>
<li class="fl"><a href="#">发现</a></li>
<li class="fl"><a href="#">阅览</a></li>
<li class="fl"><a href="#">微笔记</a></li>
<li class="fl"><a href="#">视频</a></li>
<li class="fl"><a href="#">广播</a></li>
<li class="fl"><a href="#">聊聊</a></li>
<li class="fl"><a href="#">试题</a></li>
<li class="fl"><a href="#">面试</a></li>
<li class="fl"><a href="#">电子书</a></li>
<li class="fl"><a href="#">神器</a></li>
</ul>
</li>
</ul>
<ul class="fr cl">
<li class="fl"><a href="#">登录</a></li>
<li class="fl"><a href="#">注册</a></li>
<li class="fl"><a href="#">企业入驻</a></li>
</ul>
</div>
</div>
</body>
</html>
CSS代码(zzsc.css):
.cm_mb{margin-bottom:20px;}
.area1{margin-top:20px;overflow:hidden;}
.a1L{width:900px;float:left;}
.a1R{width:300px;float:right;}
.subnav{height:50px;background:#f7f7f7;border-bottom:1px #ddd solid;}
.subbar{height:50px;position:relative;}
.subbar h2,.subbar ul,.subbar ol,.subbar li,.subbar li a{float:left;}
.subbar h2{height:50px;line-height:60px;line-height:58px\9;*line-height:61px;_line-height:61px;width:75px;font-size:20px;color:#999;font-weight:normal;overflow:hidden;}
.subbar ul,.subbar ol{padding-top:10px;height:40px;margin-right:20px;}
.subbar li{margin-left:-1px;}
.subbar li a{display:block;color:#333;height:38px;line-height:39px;_line-height:41px;padding:0 20px;background:#f1f1f1;border:1px #ddd solid;overflow:hidden;position:relative;bottom:-1px;}
.subbar li a:hover{text-decoration:none;color:#05a;}
.subbar li a.y{background:#fff;border-bottom:1px #fff solid;color:#333;}
body{font-size:14px;}
body a:hover{color:#05a;}
.funs_index_r_1,.funs_index_r_1 a{display:block;height:90px;overflow:hidden;}
.funs_index_r_2,.funs_index_r_2 a{display:block;height:250px;overflow:hidden;}
.funs_index_r_3,.funs_index_r_3 a{display:block;height:250px;overflow:hidden;}
.funs_index_l_1,.funs_index_l_1 a{display:block;height:90px;overflow:hidden;}
.funs_index_l_2,.funs_index_l_2 a{display:block;height:90px;overflow:hidden;}
.funs_index_m_1,.funs_index_m_1 a{display:block;height:60px;overflow:hidden;text-align:center;}
.funs_index_m_1{padding-top:55px;margin-top:3px;border-top:1px #ddd dotted;}
.area1{margin-top:20px;}
.a1L{position:relative;}
.banner{width:900px;position:relative;margin-bottom:15px;}
.banner,.banner ul{display:block;height:300px;overflow:hidden;}
.banner li,.banner li a,.banner li a img{display:block;width:900px;height:300px;float:left;overflow:hidden;}
.banner #prevbt,.banner #nextbt{display:block;width:30px;height:50px;background:url(indexsprites.png) no-repeat #fff;position:absolute;top:120px;opacity:.3;filter:alpha(opacity=30);}
.banner #prevbt{background-position:0 -110px;left:0;border-top-right-radius:5px;border-bottom-right-radius:5px;}
.banner #nextbt{background-position:-40px -110px;right:0;border-top-left-radius:5px;border-bottom-left-radius:5px;}
.sf4{width:900px;height:113px;overflow:hidden;}
.sf4 div{float:left;margin-left:-20px;overflow:hidden;}
.sf4 div p{margin-left:20px;display:inline!important;}
.sf4 div p,.sf4 div p a,.sf4 div p a img{display:block;width:210px;height:113px;float:left;}
.tadoing,.tadoing p,.tadoing ul,.tadoing ul li{height:30px;line-height:30px;overflow:hidden;}
.tadoing{margin:10px 0;}
.tadoing p{width:153px;float:left;background:url(indexsprites.png) no-repeat 0 8px;text-indent:23px;}
.tadoing ul{width:670px;float:left;}
.tadoing a{color:#05a;}
.tadoing em{color:#f00;}
.tadoing span{color:#999;font-size:12px;}
.tadoing div{margin-top:6px;width:61px;height:20px;float:right;}
.tadoing div a{display:block;width:30px;height:20px;float:left;background:url(indexsprites.png) no-repeat;}
.tadoing div a.goup{background-position:-160px 0;margin-right:1px;}
.tadoing div a.godown{background-position:-191px 0;}
.tadoing div a.goup:hover{background-position:-160px -20px;}
.tadoing div a.godown:hover{background-position:-191px -20px;}
.a1R{}
.hothd,.hothd .hothdL,.hothd .hothdR,.hothd .hothdR a,.hothd .hothdR a img{height:180px;}
.hothd{overflow:hidden;margin-top:12px;}
.hothd .hothdL{width:170px;float:left;position:relative;}
.hothd .hothdR{width:120px;float:right;}
.hothd .hothdL strong{display:block;height:35px;line-height:36px;line-height:38px\9;*line-height:37px;font-size:18px;margin-bottom:10px;}
.hothd .hothdL .hd-name{height:90px;overflow:hidden;font-size:14px;color:#666;line-height:22px;}
.hothd .hothdL .hd-b{display:block;width:95px;height:30px;background:url(hd-b.png) no-repeat;position:absolute;left:0;bottom:5px;}
.hothd .hothdR a,.hothd .hothdR a img{display:block;width:120px;}
.followus{height:50px;line-height:51px;_line-height:52px;overflow:hidden;}
.followus span,.followus a{display:block;float:left;}
.followus a{display:inline;text-indent:20px;background:url(indexsprites.png) no-repeat;}
.followus a:hover{color:#05a;}
.followus a.sinawb{background-position:0 -43px;margin-left:5px;}
.followus a.qqwb{background-position:-120px -43px;margin-left:10px;}
.area2{}
.cm_L{width:300px;margin-right:20px;float:left;overflow:hidden;}
.cm_M{width:580px;float:left;position:relative;overflow:hidden;}
.cm_R{width:300px;float:right;overflow:hidden;}
.yard{border:1px #ddd solid;border-top:2px #999 solid;}
.ydtitle{height:38px;padding:0 10px;background:#f7f7f7;line-height:39px;line-height:41px\9;*line-height:40px;overflow:hidden;position:relative;z-index:9;}
.ydtitle h3{font-size:16px;float:left;}
.ydtitle .cm_go{display:block;float:right;color:#666;}
.ydtitle .cm_go:hover{color:#05a;}
#goodsites{height:263px;}
.ydcontent,.ydcontent ul.c1,.ydcontent li{overflow:hidden;}
.ydcontent ul li{height:48px;line-height:24px;padding:10px;border-top:1px #ddd dotted;position:relative;z-index:8;top:-1px;left:0;overflow:hidden;}
.ydcontent ul.c1 li .pic48,.pic48 img{display:block;width:48px;height:48px;float:left;}
.ydcontent ul.c1 li .pic48{margin-right:10px;}
.ydcontent ul.c1 li p{height:48px;overflow:hidden;word-break:break-all;}
.ydcontent .bpblock{height:48px;line-height:24px;padding:10px;border-top:1px #ddd dotted;position:relative;z-index:8;top:-1px;left:0;overflow:hidden;}
.ydcontent .bpblock .pic48,.pic48 img{display:block;width:48px;height:48px;float:left;}
.ydcontent .bpblock .pic48{margin-right:10px;}
.ydcontent .bpblock p.bpb{width:160px;float:left;}
.ydcontent .bpblock .cnt_box{width:50px;height:50px;position:absolute;right:10px;top:10px;}
.ydcontent .bpblock .cnt_box span{display:block;width:50px;height:50px;line-height:18px;text-align:center;border-radius:3px;color:#666;background:#f4f4f4;overflow:hidden;}
.ydcontent .bpblock .cnt_box b{display:block;height:25px;line-height:30px;line-height:32px\9;font-weight:normal;font-size:12px;overflow:hidden;}
.ydcontent .bpblock p i,.ydcontent .bpblock p i a{color:#666;}
.ydcontent .bpblock p i a:hover{color:#05a;}
.ydcontent .c2 li a{display:block;height:48px;background:url(indexsprites.png) no-repeat -241px 5px;overflow:hidden;}
.ydcontent .c2 li a:hover{background-position:-241px -71px;}
.ydcontent .c2 li a em{display:block;width:45px;height:18px;padding-top:30px;padding-right:5px;text-align:center;font-size:12px;float:left;border-right:1px #ddd solid;margin-right:10px;}
.ydcontent .c4 li a{display:block;height:48px;background:url(indexsprites.png) no-repeat -241px -147px;overflow:hidden;}
.ydcontent .c4 li a:hover{background-position:-241px -223px;}
.ydcontent .c4 li a em{display:block;width:45px;height:18px;padding-top:30px;padding-right:5px;text-align:center;font-size:12px;float:left;border-right:1px #ddd solid;margin-right:10px;}
.ydcontent .c5 li{height:18px;line-height:18px;padding:8px 10px;border-top:1px #ddd dotted;position:relative;z-index:8;top:-1px;left:0;}
.ydcontent .c5 li a{display:block;height:18px;background:url(indexsprites.png) no-repeat -160px -195px;overflow:hidden;text-indent:12px;font-size:12px;}
.cm_M ul{border-top:2px #999 solid;position:relative;overflow:hidden;}
.cm_M ul li{height:110px;padding:24px 0 18px 0;overflow:hidden;border-top:1px #ddd dotted;position:relative;top:-1px;_top:-3px;left:0;}
.cm_M ul li h2{font-size:16px;margin-bottom:10px;}
.cm_M ul li p{height:75px;line-height:25px;color:#666;}
.cm_M ul li p a,.cm_M ul li p a img{display:block;width:110px;height:65px;float:left;}
.cm_M ul li p a{margin:5px 10px 0 0;}
.fast1,.fast2,.fast3,.fast4,.fast5{overflow:hidden;padding:10px 5px;}
.fast2,.fast4{background:#f5f5f5;}
.fast1 table,.fast2 table,.fast3 table,.fast4 table,.fast5 table{width:100%;font-size:12px;border-collapse:collapse;border-spacing:0;}
.fast1 td,.fast2 td,.fast3 td,.fast4 td,.fast5 td{height:20px;}
.fast1 .fcon,.fast2 .fcon,.fast3 .fcon,.fast4 .fcon,.fast5 .fcon{width:60px;overflow:hidden;background:url(fastsprites.png) no-repeat;}
.fast1 .fcon{background-position:13px center;}
.fast2 .fcon{background-position:-71px center;}
.fast3 .fcon{background-position:-155px center;}
.fast4 .fcon{background-position:-239px center;}
.fast5 .fcon{background-position:-322px center;}
.job_b{padding:10px 10px 12px;border-top:1px #ddd dotted;position:relative;top:-1px;}
.job_b h4{font-size:14px;height:26px;line-height:26px;overflow:hidden;}
.job_b h4 span{color:#999;margin:0 5px;font-weight:normal;font-size:12px;vertical-align:top;}
.job_b p{font-size:12px;color:#666;line-height:20px;}
.area3{overflow:hidden;}
.ydcontent ul.c3 li p{height:45px;overflow:hidden;}
.ydcontent ul.c3 li .pic60,.pic60 img{display:block;width:60px;height:45px;float:left;}
.ydcontent ul.c3 li .pic60{margin-right:10px;}
.cm_M ul.m2{margin-top:-18px;}
.gw_b{padding:10px 12px 15px;border-top:1px #ddd dotted;position:relative;top:-1px;_top:-3px;left:0;}
.gw_b div,.gw_b div a,.gw_b div a img{display:block;width:110px;height:80px;float:left;}
.gw_b div{margin:5px 10px 0 0;}
.gw_b p{font-size:12px;height:85px;overflow:hidden;color:#666;line-height:20px;}
.gw_b p b{display:block;font-size:14px;margin-bottom:7px;height:20px;line-height:21px;*line-height:23px;_line-height:22px;overflow:hidden;}
.gbook_b{padding:15px 12px 16px;border-top:1px #ddd dotted;position:relative;top:-1px;_top:-3px;left:0;overflow:hidden;}
.gbook_b div,.gbook_b div a,.gbook_b div a img{display:block;width:110px;height:145px;float:left;}
.gbook_b div{margin:5px 10px 0 0;}
.gbook_b p{font-size:12px;height:110px;overflow:hidden;color:#666;line-height:20px;}
.gbook_b p b{display:block;font-size:14px;margin-bottom:10px;line-height:21px;*line-height:23px;_line-height:22px;word-break:break-all;overflow:hidden;}
.gbook_b span{display:block;height:24px;line-height:25px;line-height:27px;_line-height:26px;font-size:12px;margin-top:10px;overflow:hidden;background:url(indexsprites.png) no-repeat 0 -197px;text-indent:24px;}
.gbook_b span a{color:#05a;}
#tgbird{position:absolute;right:0;top:10px;z-index:10;}
#tgbird,#tgbird a{display:block;width:60px;height:32px;}
#tgbird a{background:url(tougaobird.png) no-repeat 0 3px;}
#tgbird a:hover{background-position:0 -58px;}
分享到QQ
分享到微博
微信扫一扫
