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: 3;
}
.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: 2;
}
.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: 0;
    width: 98.5%;
    border: 1px solid #472201;
    background-color: #ff7817;
    z-index: 1;
    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;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);
}