特效介绍
导航条css3+js代码
如题，这是我爱模板网模仿网上的效果写的跟一个hover背景随鼠标滑动，并且如果有二级菜单，二级菜单会向上滑动渐渐显示出来的导航条效果。是基于css3的transition和jQuery写的。喜欢的拿去。高手略过。
在写这个的时候，遇到了一个问题：如果二级菜单开始是display：none，移动上去display：block的时候，transition动画无效。最后改成了visibility: hidden和visibility:visible来控制它的显示隐藏。因为二级导航是定位的，所以display控制和visibility控制都是一样的效果。
使用方法
代码就直接贴上了，太简单了，就不做解释了，可以点击文章最后的在线预览按钮查看效果：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>背景跟随鼠标二级菜单上滑显示的导航条效果 - 我爱模板网 www.5imoban.net</title>
</head>
<body>
<style>
html,body,h1,h2,h3,h4,h5,h6,hr,p,iframe,dl,dt,dd,ul,ol,li,pre,form,button,input,textarea,th,td,fieldset{margin:0; padding:0}
ul,ol,dl{list-style-type:none}
a{text-decoration: none; font-size: 14px; font-family: "微软雅黑"; color: #fff;}
.fl{float:left;}
.fr{float:right;}
.clearfix{*zoom:1;}
.clearfix:before,.clearfix:after{display:table; line-height:0; content:"";}
.clearfix:after{clear:both;}
nav{position:relative; width: 1000px; margin: auto;}
nav ul{position: relative; z-index: 2;}
nav li{float: left; position: relative;}
nav li .submenu{position:absolute; width: 100%; top:120px; left: 0; opacity: 0; background: #097077; visibility: hidden; box-shadow: 0 1px 5px 0 rgba(0,0,0,.2); transition: all 500ms;}
nav li:hover .submenu{top:80px; opacity: 1; visibility:visible;}
nav li .submenu a{display: block; text-align: center; padding:10px 0;}
nav li .submenu a:hover{background: #129da7;}
nav li>a{display: block; height: 80px; line-height: 80px; color: #6d6d6c; width: 100px; text-align: center; position: relative;}
nav li.current a,.hxz-header nav li.current a i{color: #fff;}
nav li>a i{color: #6d6d6c;}
.active-bg{background: #097077; position:absolute; left: 0; top:0; transition:all 500ms; z-index: 1;}
</style>
<nav>
<ul class="clearfix">
<li class="current"><a href="http://www.5imoban.net" target="_blank" title="静态网页模板">首页</a></li>
<li>
<a href="###">PSD模板</a>
<div class="submenu">
<a href="###">行业模板</a>
<a href="###">电子商务</a>
<a href="###">教育模板</a>
<a href="###">政府模板</a>
<a href="###">游戏社交</a>
<a href="###">其他模板</a>
</div>
</li>
<li>
<a href="###">CSS模板</a>
<div class="submenu">
<a href="###">企业模板</a>
<a href="###">门户网站</a>
</div>
</li>
<li>
<a href="###">特效插件</a>
<div class="submenu">
<a href="###">滚动轮播</a>
<a href="###">广告特效</a>
<a href="###">选项卡特效</a>
</div>
</li>
<li>
<a href="###">整站源码</a>
<div class="submenu">
<a href="###">行业模板</a>
<a href="###">电子商务</a>
<a href="###">教育模板</a>
<a href="###">政府模板</a>
<a href="###">游戏社交</a>
<a href="###">其他模板</a>
</div>
</li>
<li><a href="###">设计欣赏</a></li>
<li>
<a href="###">工具素材</a>
<div class="submenu">
<a href="###">网页图标</a>
<a href="###">网页按钮</a>
<a href="###">网页背景</a>
<a href="###">设计师字体</a>
<a href="###">flash素材</a>
</div>
</li>
<li>
<a href="###">建站教程</a>
<div class="submenu">
<a href="###">PHP教程
<a href="###">ASP教程</a>
<a href="###">JS、jQ</a>
<a href="###">Div+Css</a>
<a href="###">html教程</a>
<a href="###">CSS3+HTML5</a>
<a href="###">DW教程</a>
</div>
</li>
<li><a href="###">心境之旅</a></li>
<li><a href="###">在线留言</a></li>
</ul>
<div class="active-bg"></div>
</nav>
<script src="http://www.5imoban.net/tpl/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
function setNavActiveBg(){
var navActiveBg = $(".active-bg");
var curPos,curIdx;
var _w = $("nav a").outerWidth();
var _h = $("nav a").outerHeight();
navActiveBg.width(_w);
navActiveBg.height(_h);
var timer = null;
var aLi = $("nav li");
aLi.each(function(index){
if($(this).hasClass("current")){
curPos = _w*index;
curIdx = index;
navActiveBg.css("left",_w*index);
}
})
aLi.hover(function(){
clearInterval(timer);
$(this).addClass("current").siblings().removeClass("current");
navActiveBg.css("left",_w*($(this).index()));
},function(){
timer = setTimeout(function(){
$("nav li").eq(curIdx).addClass("current").siblings().removeClass("current");
navActiveBg.css("left",_w*curIdx);
},100)
})
}
setNavActiveBg();
</script>
</body>
</html>