思路与步骤
1.利用UL创建简单横向导航；
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>仿百度新闻菜单滑动动画</title> <style type="text/css"> body, div, ul, li, a { margin: 0px; padding: 0px; font-size: 20px; color: #FFF; border: 0; } .div-nav-container { margin-top: 50px; width: 100%; background-color: #01204F; } .div-nav { width: 870px; margin: 0px auto; } ul { list-style: outside none none; width: 100%; height: 50px; } ul li { float: left; } ul li a { line-height: 50px; display: block; padding: 0px 15px; text-align: center; text-decoration: none; } </style> </head> <body> <div> <div> <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> </ul> </div> </div> </body> </html>
2.添加一个脱离层的div,命名div-hover，用于菜单滑动动画，设置CSS样式；
<style type="text/css"> .div-hover { background-color: Red;height: 50px; left: 0px; top: 0px; width: 0px; } </style> <div> <!--添加滑动背景--> <div> </div> <ul> ... </ul> </div>
3.添加菜单项的滑动事件，计算div-hover的滑动要素，左，上边距以及宽度；
<script type="text/javascript"> var divHoverLeft = 0; var aWidth = 0; $(document).ready(function () { $("a").on({ 'mouseover': function () { SetDivHoverWidthAndLeft(this); //设置滑动动画 $(".div-hover").stop().animate({ width: aWidth, left: divHoverLeft }, 150); } }); }); function SetDivHoverWidthAndLeft(element) { divHoverLeft = GetLeft(element); aWidth = GetWidth(element); } //获得Li宽度 function GetWidth(ele) { return $(ele).parent().width(); } //获得div-hover左边距 function GetLeft(element) { //获得li之前的同级li元素 var menuList = $(element).parent().prevAll(); var left = 0; //计算背景遮罩左边距 $.each(menuList, function (index, ele) { left += $(ele).width(); }); return left; } </script>
效果预览
从预览效果可以看出，div-hover的定位是有问题的，div-hover应该以父级元素绝对定位，所以修改代码（注释部分为修改点）如下：
<style type="text/css"> .div-nav { width: 870px; margin: 0px auto; /*作为div-hover的父元素定位参照*/ position: relative; } .div-hover { background-color: Red; height: 50px; left: 0px; top: 0px; width: 0px; /*以父元素绝对定位*/ position: absolute; } </style>
虽然解决了定位问题，但是背景图片还是浮于文字上方，所以调整代码，将文字浮动于红色div之上：
<style type="text/css"> ul li { float: left; /*****Start（作用:导航文字浮于div-hover红色之上）*******/ position: relative; z-index: 4; /*********************End*************************/ } </style>
效果预览
4.添加菜单点击，以及加载页面默认菜单选中；
<style type="text/css"> /**设置菜单激活***/ .active { background-color: Red; } </style> <script type="text/javascript"> var divHoverLeft = 0; var aWidth = 0; $(document).ready(function () { $("a").on({ 'mouseover': function () { SetDivHoverWidthAndLeft(this); //设置滑动动画 $(".div-hover").stop().animate({ width: aWidth, left: divHoverLeft }, 150); }, /*添加点击事件*/ 'click': function () { SetDivHoverWidthAndLeft(this); //清除所有a标签class $('a').removeClass(); //设置当前点击菜单为激活状态 $(this).addClass('active'); } }); }); </script> </head> <body> <div> <div> <!--添加滑动背景--> <div> </div> <ul> <--默认菜单激活--> <li><a href="javascript:void(0)">网站首页</a></li> ………… </ul> </div> </div> </body> </html>
效果预览
5.添加鼠标移出范围，自动定位当前激活元素功能；
在做此功能之前，先理下思路，鼠标移出操作，我们可以想到mouseout,mouseleave事件，那么随之就会有以下几个疑问：
①这地方选用哪个事件可以满足这个条件呢？
②那选择的事件又定位在哪个元素呢？
③移出鼠标之后又如何知道当前激活的是哪个元素呢？
④如何知道div-hover的左边距和width等值呢？
实践出真知，那就实践一下：
首先，以mouseout为例，第一个问题自然就解决了；