电商分类导航

分类导航

首先看一下大体的HTML结构：

全部商品分类

    
营养保健
        

            

                

                    
音像
                    

                        音乐 影视 教育音像 游戏
                    
                
                ...

            
            

                ![](img/1.png)
            
        
    
    

     ...
    

                

li是左侧的一级菜单，div.submenu是相应的二级菜单，正常情况下是隐藏的。

我添加了一个lihover的类，当鼠标经过li时，为当前的li添加lihover类，使相应的二级菜单显示出来。

.topmenu .lihover {
    border: 1px solid #ddd;
    border-left: 0;
    border-right: 0;
    padding: 0 0 0 10px;
    background: #ffffff;
    -webkit-box-shadow: 0 1px 1px #efefef, 0 -1px 1px #efefef;
    -moz-box-shadow: 0 1px 1px #efefef, 0 -1px 1px #efefef;
    box-shadow: 0 1px 1px #efefef, 0 -1px 1px #efefef;
}

.topmenu .lihover .submenu, .topmenu .lihover .occlusion {
    display: block;
}

其中occlusion类是一个span标签，为的是遮挡住二级菜单悬浮层左边的边框。

JS代码：

window.onload = function () {
    var menuItems = document.getElementsByClassName("topmenu")[0].getElementsByTagName("li");
    for (var i = 0; i < menuItems.length; i++) {
        menuItems[i].onmouseover = function () {
            this.className = "lihover";
        };

        menuItems[i].onmouseout = function (event) {
            this.className = "";
        };
    }
};

完整代码：https://github.com/qiaoer2017/Demo2