写在前面

用简单的另一种方法实现导航栏滑动特效。

代码

.line {
 float: none;
 position: absolute;
 left: 0;
 height: 3px;
 width: 0;
 padding: 0;
 background-color: #00c1de;
 bottom: 0px;
 transition: left 0.2s ease;
 }

将position设置为absolute，使其成为一个位置独立的li标签。
left设置为0和width设置为0是为了在初始化时隐藏。
bottom为0是为了在其他li标签下浮动。
transition设置过渡动画

<ul class="nav">
<li><a href="#">homea>li>
<li><a href="#">somewherea>li>
<li><a href="#">somewherea>li>
<li class="line">li>
ul>

类为line的li标签充当滑动元素。

$('.nav li:not(".line")').mouseover(function () {
            len=$(this).width();
            left_=$(this).offset().left;      $(".line").css({"width":len,"left":left_,"visibility":"visible"});
        }).mouseout(function () {
            $(".line").css({"visibility":"hidden"});
        });

$('.nav li:not(".line")')这个选择器选择到除了类为line的li标签以外的其他li标签。
mouseover函数设置鼠标在li标签之上时的动作。len=$(this).width(); 获取到当前li标签的宽度；
left_=$(this).offset().left; 获取到当前li标签距离页面左侧的距离；
$(".line").css({"width":len,"left":left_,"visibility":"visible"});设置滑动元素的宽度为当前选中li标签的宽度，left属性值为当前li标签的距离页面左侧的距离，从而保证其正好在下方。最后设置当鼠标在li元素上时滑动元素是可见的。
最后，当鼠标离开导航栏时，$(".line").css({"visibility":"hidden"});设置滑动元素隐藏。

代码全文

不粘代码全文了。呵呵。