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

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

html:

 <div class="mainnav">
             <div class="navwrap">
                 <ul class="navul">
                     <li class="navlist"><a class="nav_a" href="index.html">首页<br/><span>Home</span></a></li>
                     <li class="navlist"><a class="nav_a" href="#dotwrap">奖励说明<br/><span>Award description</span></a></li class="navlist">
                     <li class="navlist"><a class="nav_a" href="#">人气投票<br/><span>Popular vote</span></a></li>
                     <li class="navlist"><a class="nav_a" href="#">Q&amp;A<br/><span>interlocution</span></a></li>
                     <li class="navlist">
                         <a class="nav_a" href="#">关于Marvell<br/><span>About Marvell</span></a>
                         <div class="downlist clear">
                             <ul>
                                 <li class="navitem"><a href="#">美满全球</a></li>
                                 <li class="navitem lastitem"><a href="#">美满中国</a></li>
                             </ul>
                         </div>
                     </li>
                 </ul>
             </div>
         </div>

css：

 .mainnav{
     background: url(../images/mainnavbg.png) repeat-x;
     height: 73px;
     width: 100%;
     position: relative;
     z-index:;
 }
 .navwrap .navul{
     position: relative;
     height: 100%;
     float: left;
     margin-left: 150px;
 }
 .mainnav .navwrap{
     width: 933px;
     margin: 0 auto;
     height: 73px;
 }
 .mainnav li.navlist{
     float: left;
     height: 70px;
     position: relative;
     z-index:;
 }
 .nav_bg{
     background: #a24601;
 }
 .mainnav a.nav_a{
     padding:10px 28px 0;
     font-size: 17px;
     color: #000;
     text-align: center;
 }
 .mainnav a span{
     font-size: 13px;
 }
 .downlist .navitem{
     float: left;
     height: 48px;
     line-height: 48px;
     margin: 0 18px;
     border-bottom: 1px solid #7c3500;
     padding: 0 18px;
 }
 .downlist .lastitem{
     border-bottom: none;
 }
 .downlist{
     position: absolute;
     top: 70px;
     left:;
     width: 98.5%;
     border: 1px solid #472201;
     background-color: #ff7817;
     z-index:;
     display: none;
 }
 .navitem a{
     font-size: 18px;
     color: #000;
 }
 .navitem .dl_hover{
     color: #fff;
 }

js:

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