电商分类导航

分类导航

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

<div class="toptitle"><a href="#">全部商品分类</a></div>
<ul class="topmenu">
    <li><a href="#">营养保健</a><span class="occlusion"></span>
        <div class="submenu">
            <div class="cat-part-col1">
                <dl>
                    <dt><a href="#">音像</a></dt>
                    <dd>
                        <a href="#">音乐</a> <a href="#">影视</a> <a href="#">教育音像</a> <a href="#">游戏</a>
                    </dd>
                </dl>
                ...

            </div>
            <div class="cat-part-col2">
                ![](img/1.png)
            </div>
        </div>
    </li>
    <li>
     ...
    </li>
</ul>
                

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