jquery导航条，鼠标悬停上下滑动

炫酷的jQuery导航条，鼠标悬停上下滑动。
1、在head区域引入下面的代码

<link href="css/style.css" rel="stylesheet" type="text/css" />
<script src="http://www.5imoban.net/tpl/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $("#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':    '48px'},    300);
        $(".over",this).stop().animate({'top':    '0px'}, 300);
    }, function() {
        $(".out",this).stop().animate({'top':    '0px'}, 300);
        $(".over",this).stop().animate({'top':    '-48px'}, 300);
    });
});
</script>

2、在需要使用本导航的地方引入下面的代码：

<div id="menu2" class="menu">
    <ul>
        <li><a href="http://www.5imoban.net" title="返回我爱模板网首页">首 页</a></li>
        <li><a href="#">CSS模板</a></li>
        <li><a href="#">PSD模板</a></li>
        <li><a href="#">网页特效</a></li>
        <li><a href="#">建站教程</a></li>
        <li><a href="#">导航栏特效</a></li>
        <li><a href="#">tab选项卡</a></li>
        <li><a href="#">网站源码</a></li>
        <li><a href="#">心境之旅</a></li>
    </ul>
    <div class="cls"></div>
</div>

3、将地址和内容换成自己的网站内容。


部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！