前言:不多说直接看效果!!!
![](https://static.oschina.net/uploads/img/201611/29110908_UsN7.gif)
这样的菜单我们在一般的网站上见到的也比较多,有比较好的用户体验!
原理:这个很重要,任何的特效只要原理搞明白了,实现起来都是很容易的!这个特效的原理很简单,菜单的样式我们都很容易实现就是一些CSS而已!
中间那个滑块其实就是一个定位为:
absolute 的元素,每当鼠标放到一个A元素上的时候用JQ获取到当前A元素的位置和宽度,再用JQ的animate方法,以动画的形式给元素即可!
当然你在这里也可以也一些其它的动画
1、DOM结构
<div class="nav-wrapper">
<div class="container">
<ul id="nav-list">
<li class="nav-item"><a href="http://www.lanrentuku.com/" class="active" target="_blank">网站首页</a></li>
<li class="nav-item"><a href="http://www.lanrentuku.com/" target="_blank">网上商城</a></li>
<li class="nav-item"><a href="http://www.lanrentuku.com/" target="_blank">智能管家</a></li>
<li class="nav-item"><a href="http://www.lanrentuku.com/" target="_blank">技术支持</a></li>
<li class="nav-item"><a href="http://www.lanrentuku.com/" target="_blank">应用案例</a></li>
<li class="nav-item"><a href="http://www.lanrentuku.com/" target="_blank">关于我们</a></li>
<li class="nav-item"><a href="http://www.lanrentuku.com/" target="_blank">懒人图库</a></li>
</ul>
<div class="animate-block"></div>
</div>
</div>
![](https://static.oschina.net/uploads/img/201611/29110908_ZQ6B.gif)
![](https://static.oschina.net/uploads/img/201611/29110908_HbST.gif)
1 *{margin: 0;padding: 0;}
2 body{ font-family:"Microsoft YaHei";}
3 .container {
4 width: 1200px;
5 margin: 30px auto;
6 position: relative;
7 }
8 li {
9 list-style: none;
10 }
11 .nav-wrapper {
12 background-color: #0191d7;
13 height: 50px;
14 }
15 #nav-list {
16 position: relative;
17 z-index: 1;
18 }
19 #nav-list .nav-item {
20 float:left;
21 height: 50px;
22 }
23 #nav-list li a{
24 display: block;
25 padding: 0 50px;
26 height: 50px;
27 font-size: 16px;
28 line-height: 50px;
29 color: #fff;
30 text-decoration: none;
31 }
32 .animate-block {
33 position: absolute;
34 height: 50px;
35 background-color: #2B6B8A;
36 left: 0;
37 top:0;
38 z-index: 0;
39 }
40 .active {
41 box-shadow: 0 0 2px rgba(0,0,0,.1);
42 }
![](https://static.oschina.net/uploads/img/201611/29110908_ZQ6B.gif)
![](https://static.oschina.net/uploads/img/201611/29110908_HbST.gif)
$(function () {
var $active = $(".active"); //当前选中的菜单
var $active_w = $active.innerWidth();
var $active_l = $active.position().left;
var $animate_block = $(".animate-block");
//设置滑块初始位置
$(".animate-block").css({width:$active_w,left:$active_l});
//a事件
$("#nav-list>li").hover(function () {
var index = $(this).index();
var $a_cur = $("#nav-list a").eq(index);//得到当前元素
var width = $a_cur.innerWidth();
var left = $a_cur.position().left;
$(".animate-block").stop().animate({width:width,left:left});
},function () {
$(".animate-block").stop().animate({width:$active_w,left:$active_l});
});
});
参考资料: