智能社官网顶部导航实现demo

从智能社的blue老师公开课中学习到了很多，在此表示感谢。

这个导航很好玩，于是就想实现一个。

html

<div id="box">
      <ul>
        <li><a href="javascript:void(0)">首页</a></li>
        <li><a href="javascript:void(0)">内容</a></li>
        <li><a href="javascript:void(0)">模板</a></li>
        <li><a href="javascript:void(0)">招聘</a></li>
        <li><a href="javascript:void(0)">介绍</a></li>
        <li><a href="javascript:void(0)">成功</a></li>
        <li><a href="javascript:void(0)">论坛</a></li>
        <li><a href="javascript:void(0)">论坛</a></li>
        <li><a href="javascript:void(0)">论坛</a></li>

        <!--<li id="bgli"></li>-->
      </ul>
</div>

　　

css

* { padding: 0; margin: 0; }
#box { margin: 50px auto; height: 40px; background: #ccc; }
#box ul { position: relative; margin: 0 auto; width: 960px; }
#box li { float: left; margin-right: 0px; width: 100px; height: 40px; }
li { list-style: none; }
a { font-style: normal; position: relative; color: #efefef; text-align: center; line-height: 40px; text-decoration: none; display: block; z-index: 200 }
#bgli { position: absolute; background: red; border-radius: 10px; width: 70px; height: 40px; z-index: 100 }

　　

js

!(function($){
    $.fn.extend({
        slider:function(sibling){
            sibling.first().after("<li id='bgli'></li>")

            $(this).hover(function(){
                var nowleft = $(this).position().left;
                var bjlileft = $("#bgli").position().left;
                if(nowleft>bjlileft){
                    $("#bgli").stop().animate({left:nowleft+20
                    },300,function(){
                        $("#bgli").stop().animate({left:nowleft},100)
                    })
                }else{
                    $("#bgli").stop().animate({left:nowleft-20
                    },300,function(){
                        $("#bgli").stop().animate({left:nowleft},100)
                    })
                }

            },function(){
                $("#bgli").stop().animate({left:0})
                return false;
            })
        }
    })
})(jQuery);

//调用
$(function(){
     var $li = $("#box>ul li");
     $li.slider($li)
})

　　

要先引入jq库哦