*{ margin:0px; padding:0px; font-family: "Microsoft Yahei", Helvetica, sans-serif, Lato; } li{ list-style: none; } a{ text-decoration: none; } .nav{ width:100%; height: 40px; background-color: #222; margin-top:100px; overflow: hidden; } .nav-list{ width:1000px; margin:0 auto; height: 40px; } .nav-list li { float: left; } .nav-list li a{ display: block; transition: 0.2s; } .nav-list li b,.nav-list li i{ color:#aaa; line-height: 40px; display: block; padding:0 30px; text-align: center; } .nav-list li b{ font-weight:normal; } .nav-list li i{ font-style: normal; color:#fff; background-color: #333; } .nav-list li a:hover{ margin-top:-40px; }
红色部分就是这个过程的实现，利用位置的变化，当鼠标移上去的时候，显示中文，也就是将英文移开，值得注意的是，需要利用overflow:hidden属性，将其隐藏。如果想要速度慢一点的话，可以利用transition属性设置变化时间，就可以减慢变化速度。
接着是用jquery实现：
css：
*{ margin:0px; padding:0px; font-family: "Microsoft Yahei", Helvetica, sans-serif, Lato; } li{ list-style: none; } a{ text-decoration: none; } .nav{ width:100%; height: 40px; background-color: #222; margin-top:100px; overflow: hidden; } .nav-list{ width:1000px; margin:0 auto; height: 40px; } .nav-list li { float: left; } .nav-list li a{ display: block; } .nav-list li b,.nav-list li i{ color:#aaa; line-height: 40px; display: block; padding:0 30px; text-align: center; } .nav-list li b{ font-weight:normal; } .nav-list li i{ font-style: normal; color:#fff; background-color: #333; }
jquery:
$(function(){ $(".nav-list li a").hover(function(){ $(this).stop().animate({"margin-top":-40},200) },function(){ $(this).stop().animate({"margin-top":0},200) }); });
实现功能的重点是animate()函数的实现，通过设置margin-top和时间实现，为了防止快速经过时，所有的都会变化（如下图所示），需要在animate()函数前面加上stop()函数，即在所有动画之前，先停止其他的动画，然后再开始这个动画。
3、带有弹性动画的导航条
我采用了三种方式实现，第一种是css3,第二种是jquery，第三种是jquery easing实现。效果图如下：
因为三种的布局是一样的，所以就直接附上html的结构代码。
html:
<div> <ul> <li> <a href="#">首页</a> </li> <li> <a href="#">论坛</a> <div> <a href="#">java论坛</a> <a href="#">js论坛</a> <a href="#">jquery论坛</a> <a href="#">css3论坛</a> </div> </li> <li> <a href="#">博客</a> <div> <a href="#">精彩博文</a> <a href="#">博客专栏</a> <a href="#">博客专家</a> <a href="#">我的博客</a> </div> </li> <li> <a href="#">商城</a> <div> <a href="#">软件商城</a> <a href="#">C币商城</a> <a href="#">C币充值</a> </div> </li> <li> <a href="#">下载</a> <div> <a href="#">资源分类</a> <a href="#">我的资源</a> </div> </li> </ul> </div>
第一种：css3实现
*{ margin:0px; padding:0px; font-family: "Microsoft Yahei", Helvetica, sans-serif, Lato; } li{ list-style: none; } a{ text-decoration: none; } .nav{ width:100%; height: 40px; margin-top:50px; background-color: #222; } .nav .nav-list{ width: 1000px; height: 40px; margin:0 auto; } .nav .nav-list li{ float: left; position: relative; } .nav .nav-list li > a{ display: block; height: 40px; line-height: 40px; padding:0 30px; color:#aaa; width:60px; } .nav .nav-list li:hover>a{ color:#fff; background-color: #333; } <span>.nav .nav-list li:hover .nav-down{ display: block; }</span> .nav-down{ width:150px; background-color: #333; position: absolute; top:40px; left:0px; display: none; } .nav .nav-list .nav-down a{ display: block; line-height: 30px; color:#aaa; padding-left:30px; } <span>.nav .nav-list .nav-down a:hover{ color:#fff; background-color: #333; }</span>