jQuery的滑动式动画导航栏

效果图：

 

css：

 

 

* { margin:0; padding:0; }
body { background:#fff url(top_bg.png) repeat-x 0 0; color:#5b5b5b; height:100%; font:normal normal 12px/24px "微软雅黑", "Microsoft YaHei", "黑体"; }
ul { list-style:none; }
#wrapper { width:960px; margin: 0 auto; text-align:center; padding-top:35px; }
h1 { font: italic normal 32px/45px "Lucida Sans Unicode", "Lucida Grande", sans-serif; color:#fff; }
h4 { color:#fff; font: italic normal 14px Arial, Helvetica, sans-serif; text-align:right; margin-right:255px; }
h4 a { color:#fff; border-bottom:1px dotted #fff; text-decoration:none; font-style:normal; }
h4 a:hover { color:#202020; border-bottom:1px solid #202020;}
#nav {
  width:432px;
  margin:49px auto 0; /*让元素在页面居中*/
}
#nav li {
  width:68px;
  height:88px;
  float:left;
  margin:0 2px;
  position:relative; /*li标签相对定位*/
  text-align:center;
  z-index:5;
  display:inline;
}
#nav li span {
  color:#fff;
  width:68px;
  background:url(nav_bg.png) no-repeat 0 0;/*滑动背景添加到span标签中*/
  position:absolute; /*span标签绝对定位*/
  top:0; left:0;
  z-index:10;/*span标签要在a标签的下面，所以层叠顺序要小于a标签的层叠顺序*/
  font-size:11px;
  height:58px;
  padding-top:30px;
  display:none;/*在默认状态下span标签是隐藏的*/
}
#nav li a {
  color:#202020;
  font-size:14px;
  letter-spacing:0.5px;
  width:68px;
  display:block;
  position:absolute;/*a标签也同样需要绝对定位*/
  top:0; left:0;
  z-index:20;/*但是a标签的层叠顺序应该是大于span标签的，这样才能确保a标签不被span标签遮盖住*/
  height:35px;
  padding-top:55px;
  text-decoration:none;
}
#nav li.on span { display:block;}
#nav li.on a { color:#fff;}

 javascript：

 

$(function(){
	$('#nav li').children('a').hover(function(){//查找li标签中的a标签并且为a标签绑定一个鼠标悬停的事件
		$(this).siblings('span').slideDown(100);//当鼠标悬停的时候查找a标签的同辈span标签，并给span标签添加一个滑下来的效果（显示）
		var changeColor = this;
	    this.timer = setTimeout(function(){
			$(changeColor).css({'color':'#fff'});//当span标签滑下来后a标签更改字体的颜色为白色
		},100);
	},function(){
		if(this.timer) clearTimeout(this.timer);
		$(this).siblings('span').slideUp(100);//当鼠标离开的时候查找a标签的同辈span标签，并给span标签添加一个滑上去的效果（隐藏）
		$(this).css({'color':'#202020'});//当span标签滑上去后a标签更改字体的颜色为黑色
	}); 
});

 

 html：

 

<div id="wrapper"> 
  <h1>基于jQuery的滑动式动画导航栏</h1> 
  <h4>by:<a href="http://www.stylechen.com">Stylechen</a></h4> 
  <ul id="nav"> 
    <li class="on"><span>HOME</span><a href="#">首页</a></li> 
    <li><span>ABOUT</span><a href="#">我们</a></li> 
    <li><span>SERVICES</span><a href="#">服务</a></li> 
    <li><span>WORK</span><a href="#">工作</a></li> 
    <li><span>CLIENT</span><a href="#">客户</a></li> 
    <li><span>CONTACT</span><a href="#">联系</a></li> 
  </ul> 
</div>