所属分类:网页特效-导航菜单
/* menu */
.menu{height:45px;overflow:hidden;}
.menu ul li{float:left;position:relative;text-align:center;line-height:45px;height:45px;overflow:hidden;}
.menu ul li a{position:relative;/* 必要元素 */display:block;width:110px;height:45px;font-size:12px;font-weight:bold;text-decoration:none;cursor:pointer;}
.menu ul li a span{position:absolute;/* 必要元素 */left:0;width:110px;}
.menu ul li a span.out{top:0px;}
.menu ul li a span.over,.menu ul li a span.bg{top:-45px;}
/* 实例一 */
#menu{background:#F8F0D5;}
#menu ul li a{color:#000;}
#menu ul li a span.over{color:#FFF;}
#menu ul li span.bg{height:45px;background:url('images/04.png') center center no-repeat;}
/* 实例二 */
#menu2{background:#89A4B1;}
#menu2 ul li a{color:#FFF;}
#menu2 ul li a span.over{background:#A9CC2D;color:#FFF;}
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
$(document).ready(function(){
//实例一
$("#menu li a").wrapInner('<span class="out"></span>' ).append('<span class="bg"></span>');
$("#menu li a").each(function(){
$('<span class="over">' + $(this).text() + '</span>').appendTo(this);
});
$("#menu li a").hover(function(){
$(".out",this).stop().animate({'top':'45px'},250);
$(".over",this).stop().animate({'top':'0px'},250);
$(".bg",this).stop().animate({'top':'0px'},120);
},function(){
$(".out",this).stop().animate({'top':'0px'},250);
$(".over",this).stop().animate({'top':'-45px'},250);
$(".bg",this).stop().animate({'top':'-45px'},120);
});
//实例一
$("#menu2 li a").wrapInner('<span class="out"></span>');
$("#menu2 li a").each(function(){
$('<span class="over">' + $(this).text() + '</span>').appendTo(this);
});
$("#menu2 li a").hover(function(){
$(".out",this).stop().animate({'top':'45px'},200);
$(".over",this).stop().animate({'top': '0px'},200);
},function(){
$(".out",this).stop().animate({'top':'0px'},200);
$(".over",this).stop().animate({'top':'-45px'},200);
});
});
<h2>实例1、</h2>
<div id="menu" class="menu">
<ul>
<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>
</div>
<h2>实例2、</h2>
<div id="menu2" class="menu">
<ul>
<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>
</div>