js下拉菜单案例详解（js原生）

一，知识点

1，数组的重组（把所有的一级导航放一个数组里，把所有的二级导航放一个数组里）

2，定时器的使用（clearTimeout，setTimeout）

3，鼠标经过（onmouseout）鼠标经过（onmouseover）和鼠标移出的使用（onmouseout）以及for循环的使用

二，解决思路

1，把所有的一级导航放一个数组里，把所有的二级导航放一个数组里

2，给一级菜单和二级菜单加索引

3，鼠标经过一级菜单的时候先把当前索引下的一级二级都变为非当前状态，再把当前索引的一级二级都变为当前状态

4，当鼠标经过二级菜单的时候清除离开一级菜单时设置的定时器，当鼠标离开二级菜单的时候，二级菜单隐藏

三，详细代码

1,css

li { list-style: none; }

#nav { width: 500px; height: 36px; padding: 0 10px; background: url(images/nav_bg.gif) repeat-x; margin: 50px auto 0; position: relative; }
#nav .adorn1 { width: 6px; height: 36px;  position: absolute; top: 0; left: 0; }
#nav .adorn2 { width: 6px; height: 36px; position: absolute; top: 0; right: 0; }
#nav li { float: left; height: 36px; padding: 0 3px 0 7px; position: relative; cursor: pointer; }

#nav .line { background: url(images/active_bg.gif) no-repeat 0 -90px; }

#nav .active { float: left; height: 36px; line-height: 36px; font-size: 14px; text-decoration: none; color: #fff;  }
#nav .active span { float: left; height: 36px; line-height: 36px; font-size: 14px; padding: 0 20px; text-decoration: none; color: #fff; background: url(images/active_bg.gif) no-repeat 0 5px; }
#nav .normal { float: left; height: 36px; line-height: 36px; font-size: 14px; text-decoration: none; color: #fff; }
#nav .normal span { float: left; height: 36px; padding: 0 20px; }
#nav .normal:hover { background: url(images/active_bg.gif) no-repeat right -40px; }
#nav .normal:hover span { background: url(images/active_bg.gif) no-repeat 0 5px; }

#nav .float_layer { height: 27px; color: #235e99; padding: 0 10px; background: url(images/nav_bg.gif) repeat-x 0 -162px; position: absolute; top: 46px; display: none; }
#nav .arrows { width: 7px; height: 5px; overflow: hidden; background: url(images/active_bg.gif) no-repeat 0 -190px; position: absolute; top: -4px; }
#nav .decorate1 { width: 6px; height: 27px; background: url(images/nav_bg.gif) no-repeat 0 -108px; position: absolute; top: 0; left: -6px; }
#nav .decorate2 { width: 6px; height: 27px; background: url(images/nav_bg.gif) no-repeat 0 -135px; position: absolute; top: 0; right: -6px; }

#nav .float_layer a { float: left; height: 27px; line-height: 22px; font-size: 12px; color: #235e99; text-decoration: none; background: url(images/active_bg.gif) no-repeat right -207px; padding: 0 8px; }
#nav .float_layer a span { float: left; height: 18px; padding-top: 3px; overflow: hidden; border-bottom: 2px solid #cedce8; }
#nav .float_layer a:hover span { border-bottom: 2px solid #235e99; }

#nav p { position: absolute; top: 10px; right: 20px; }
#nav p a { color: #fff; font-size: 14px; text-decoration: none; }
#nav p a:hover { text-decoration: underline; }

.pos1 { left: 0; }
.pos1 .arrows { left: 36px; }
.w1 { width: 245px; }

.pos2 { left: 0; }
.pos2 .arrows { left: 50px; }
.w2 { width: 260px; }

.pos3 { left: -100px; }
.pos3 .arrows { left: 136px; }
.w3 { width: 230px; }

.pos4 { left: -100px; }
.pos4 .arrows { left: 136px; }
.w4 { width: 310px; }

2,html

<div id="nav">
   
    <ul>
        <li>
            <a class="active" href="#"><span>首页</span></a>
            <span class="float_layer w1 pos1">
                <span class="arrows"></span>
                <span class="decorate1"></span>
                <span class="decorate2"></span>
                <a href="#"><span>最近更新</span></a>
                <a href="#"><span>活动</span></a>
                <a href="#"><span>报名试听</span></a>
                <a href="#"><span>学员反馈</span></a>
            </span>
        </li>
        <li class="line">
            <a class="normal" href="#"><span>关于我们</span></a>
            <span class="float_layer w2 pos2">
                <span class="arrows"></span>
                <span class="decorate1"></span>
                <span class="decorate2"></span>
                <a href="#"><span>妙味讲师</span></a>
                <a href="#"><span>培训方式</span></a>
                <a href="#"><span>培训理念</span></a>
                <a href="#"><span>联系我们</span></a>
            </span>
        </li>
        <li class="line">
            <a class="normal" href="#"><span>作品</span></a>
            <span class="float_layer w3 pos3">
                <span class="arrows"></span>
                <span class="decorate1"></span>
                <span class="decorate2"></span>
                <a href="#"><span>般固</span></a>
                <a href="#"><span>MATRIX</span></a>
                <a href="#"><span>留学e网</span></a>
                <a href="#"><span>ECMall</span></a>
            </span>
        </li>
        <li class="line">
            <a class="normal" href="#"><span>博客</span></a>
            <span class="float_layer w4 pos4">
                <span class="arrows"></span>
                <span class="decorate1"></span>
                <span class="decorate2"></span>
                <a href="#"><span>JS教程</span></a>
                <a href="#"><span>弹出层效果</span></a>
                <a href="#"><span>3D球面标签云</span></a>
                <a href="#"><span>Window计算器</span></a>
            </span>
        </li>
    </ul>
    <p><a href="#">>>更多</a></p>
</div>

3,js

<script type="text/javascript">
window.onload = function()
{
    var oDiv=document.getElementById('nav');
    var aLi=oDiv.getElementsByTagName('ul')[0].getElementsByTagName('li');
    var aA=[];
    var aSpan=[];
    var oTimer=null;
    var i=0;
    
    for(i=0;i<aLi.length;i++)
    {   //把所有的a放一数组里
        aA.push(aLi[i].getElementsByTagName('a')[0]);
        //把所欲的span放一个数组里
        aSpan.push(aLi[i].getElementsByTagName('span')[1]);
    }
    console.log(aA)
    console.log(aSpan)
    for(i=0;i<aLi.length;i++)
    {  
        aA[i].miaovIndex=i;
        //鼠标经过的时候
        aA[i].οnmοuseοver=function ()
        {
        
         //先清除定时器
            if(oTimer)
            {
                clearTimeout(oTimer);
                oTimer=null;
            }
            for(i=0;i<aLi.length;i++)
            {
               //把所有的设置为当前
                aA[i].className='normal';
                aSpan[i].style.display='none';
            }
            
            //给当前的加事件
            aA[this.miaovIndex].className='active';
            aSpan[this.miaovIndex].style.display='block';
        };
        //移除的时候
        aA[i].οnmοuseοut=function ()
        {
            var index=this.miaovIndex;
            //设置定时器
            oTimer=setTimeout
            (
                function ()
                {
                    aSpan[index].style.display='none';
                    oTimer=null;
                },1000
            );
        };
        
        aSpan[i].miaovIndex=i;
        //鼠标经过的时候
        aSpan[i].οnmοuseοver=function ()
        {
            //如果有定时器清除
            if(oTimer)
            {
                clearTimeout(oTimer);
                oTimer=null;
            }
        };
        //从下拉移除的时候二级菜单也去除
        aSpan[i].οnmοuseοut=function ()
        {
            var index=this.miaovIndex;
            oTimer=setTimeout
            (
                function ()
                {
                    aSpan[index].style.display='none';
                    oTimer=null;
                },1000
            );
        }
    }
}

</script>

四，注意事项

定时器的清除