智能社官网顶部导航实现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库哦
http://websong.gitee.io/songyublog/