2020-07-12 JS学习 设置二级导航栏动态效果

1、html代码写出一个二级导航栏(如果js有涉及获取节点之类的，元素之间不可以有换行和空格)

    

        

            公司介绍
            

              
公司形象
              
公司荣誉
              
公司文化
              
形象
        
        

          产品
          

            
公司形象
            
公司荣誉
            
公司文化
            
形象
        
        

            联系我们
            

              
公司形象
              
公司荣誉
              
公司文化
            
        
    

大概的结构就是这样，图片有些难看，后期再用visio画一遍

2020-07-13_001253.png

2、CSS样式设置

#nav{
    width: 800px;
    height: auto;
    position: relative;
    overflow: auto;
    background: rgba(0,0,0,0.5);
}
#nav ul{
    list-style-type: none;
    padding: 0;
    margin: 0;
}
#nav>ul>li{
    width: 120px;
    height: auto;
    float: left;
    text-align: center;
    border:1px solid #FFFFFF;
}
#nav>ul>li>a{
    display: block;
    text-decoration: none;
    background: #f00;
    color: #FFFFFF;
    line-height: 30px;
}
#nav>ul>li>a.bg{
    background: #00FF00;
}
#nav>ul>li>ul{
    display: none;
}
#nav>ul>li>ul.show{
    display: block;
}

3、js方法

var div=document.getElementById('nav');//获得导航栏最高级的div对象
var dul=div.children[0];//一级导航ul：div>ul
var lis=dul.children;//一级导航栏内容，也是二级导航栏的标题：div>ul>li
for(var i=0;i

4、最后的实现效果就是这个样子，更多的样式还是要看情况自己设置

鼠标移开二级导航栏隐藏：

onmouseout.png

鼠标经过二级导航栏弹出：

onmouseover.png