首页 > 代码库 > JQ滑动导航菜单的实现
JQ滑动导航菜单的实现
前言：不多说直接看效果！！！
这样的菜单我们在一般的网站上见到的也比较多，有比较好的用户体验！
原理：这个很重要，任何的特效只要原理搞明白了，实现起来都是很容易的！这个特效的原理很简单,菜单的样式我们都很容易实现就是一些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>
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 }
$(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}); }); });
参考资料：
脚本之家：http://www.jb51.net/article/36302.htm
站长之家：http://sc.chinaz.com/jiaoben/141223079100.htm
JQ滑动导航菜单的实现
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。