JS滑动下划线导航菜单实现原理

效果如下：http://campus.51job.com/test/zengxl/js

html:

 1 <div class="mainnav">
 2             <div class="navwrap">
 3                 <ul class="navul">
 4                     <li class="navlist"><a class="nav_a" href="index.html">首页<br/><span>Home</span></a></li>
 5                     <li class="navlist"><a class="nav_a" href="#dotwrap">奖励说明<br/><span>Award description</span></a></li class="navlist">
 6                     <li class="navlist"><a class="nav_a" href="#">人气投票<br/><span>Popular vote</span></a></li>
 7                     <li class="navlist"><a class="nav_a" href="#">Q&amp;A<br/><span>interlocution</span></a></li>
 8                     <li class="navlist">
 9                         <a class="nav_a" href="#">关于Marvell<br/><span>About Marvell</span></a>
10                         <div class="downlist clear">
11                             <ul>
12                                 <li class="navitem"><a href="#">美满全球</a></li>
13                                 <li class="navitem lastitem"><a href="#">美满中国</a></li>
14                             </ul>
15                         </div>
16                     </li>
17                 </ul>
18             </div>
19         </div>

css：

 1 .mainnav{
 2     background: url(../images/mainnavbg.png) repeat-x;
 3     height: 73px;
 4     width: 100%;
 5     position: relative;
 6     z-index: 3;
 7 }
 8 .navwrap .navul{
 9     position: relative;
10     height: 100%;
11     float: left;
12     margin-left: 150px;
13 }
14 .mainnav .navwrap{
15     width: 933px;
16     margin: 0 auto;
17     height: 73px;
18 }
19 .mainnav li.navlist{
20     float: left;
21     height: 70px;
22     position: relative;
23     z-index: 2;
24 }
25 .nav_bg{
26     background: #a24601;
27 }
28 .mainnav a.nav_a{
29     padding:10px 28px 0;
30     font-size: 17px;
31     color: #000;
32     text-align: center;
33 }
34 .mainnav a span{
35     font-size: 13px;
36 }
37 .downlist .navitem{
38     float: left;
39     height: 48px;
40     line-height: 48px;
41     margin: 0 18px;
42     border-bottom: 1px solid #7c3500;
43     padding: 0 18px;
44 }
45 .downlist .lastitem{
46     border-bottom: none;
47 }
48 .downlist{
49     position: absolute;
50     top: 70px;
51     left: 0;
52     width: 98.5%;
53     border: 1px solid #472201;
54     background-color: #ff7817;
55     z-index: 1;
56     display: none;
57 }
58 .navitem a{
59     font-size: 18px;
60     color: #000;
61 }
62 .navitem .dl_hover{
63     color: #fff;
64 }

js:

 1 /**
 2      * 动态添加导航下方的滑动条
 3      */
 4     var navul = document.getElementsByClassName('navul');
 5     //创建div元素
 6     var navBtn = document.createElement('div');
 7     //设置css样式,注意transition:all
 8     navBtn.style.cssText = 'position:absolute;0;bottom:3px;left:0;z-index:998;height:5px;background-color:#4486d4;'+
 9     'box-shadow:0 0 3px #fff;transition:all .5s ease;'
10     //把创建的这个div添加到ul中
11     navul[0].appendChild(navBtn);
12     //获取里面的a元素
13     var nav_a = document.getElementsByClassName('nav_a');
14     var len = nav_a.length;
15     for (var i = 0; i < len; i++) {
16         //currentStyle:IE的选中样式。 getComputedStyle:FF的计算后样式
17         var style = nav_a[i].currentStyle||getComputedStyle(nav_a[i]);
18         //style.paddingLeft得到的值是带有'px'的，所以转换成Number类型
19         var pL = parseInt(style.paddingLeft,10);
20         var pR = parseInt(style.paddingRight,10)
21         //样式初始化
22         navBtn.style.width = (nav_a[0].offsetWidth-pL-pR)+'px';
23         navBtn.style.left = (nav_a[0].offsetLeft+pL)+'px';
24         //给当前对象添加事件。
25         nav_a[i].addEventListener('mouseenter',function(){
26         //this指的是当前的这个对象
27                 navBtn.style.width = (this.offsetWidth-pL-pR)+'px';
28                 navBtn.style.left = (this.offsetParent.offsetLeft+pL)+'px';
29             },false);
30         nav_a[i].addEventListener('mouseleave',function(){
31                 navBtn.style.width = (nav_a[0].offsetWidth-pL-pR)+'px';
32                 navBtn.style.left = (nav_a[0].offsetLeft+pL)+'px';
33             },false);
34 }