JQ滑动导航菜单的实现

前言：很少说直接看效果！！！

这样的菜单咱们在通常的网站上见到的也比较多，有比较好的用户体验！

 

原理：这个很重要，任何的特效只要原理搞明白了，实现起来都是很容易的！这个特效的原理很简单,菜单的样式咱们都很容易实现就是一些CSS而已！

中间那个滑块其实就是一个定位为： absolute 的元素，每当鼠标放到一个A元素上的时候用JQ获取到当前A元素的位置和宽度，再用JQ的animate方法，以动画的形式给元素便可！

固然你在这里也能够也一些其它的动画

---

一、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>

　　

二、对应的CSS

 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         }

View Code

 

三、JQ代码

$(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}); }); });

View Code

 

参考资料：

脚本之家： http://www.jb51.net/article/36302.htm

站长之家： http://sc.chinaz.com/jiaoben/141223079100.htm