二级下拉菜单

前端入坑纪 12

最近忙得跟什么似的，今天难得抽空终于可以来更新简书了。
想来最近做了个二级下拉菜单，样式草草，请君略之~

截图

OK，first things first！项目链接

HTML 结构

    <nav>
        <ul id="navLvOne" class="navLvOne clearfix">
            <li>
                <a href="javascript:;">首页</a>

            </li>
            <li>
                <a href="javascript:;">一页</a>
                <ol>
                    <li>
                        <a href="javascript:;">页一1</a>
                    </li>
                    <li>
                        <a href="javascript:;">页一2</a>
                    </li>
                    <li>
                        <a href="javascript:;">页一3</a>
                    </li>
                    <li>
                        <a href="javascript:;">页一4</a>
                    </li>
                </ol>
            </li>
            <li>
                <a href="javascript:;">二页</a>
                <ol>
                    <li>
                        <a href="javascript:;">页二1</a>
                    </li>
                    <li>
                        <a href="javascript:;">页二2</a>
                    </li>
                    <li>
                        <a href="javascript:;">页二3</a>
                    </li>

                </ol>
            </li>
            <li>
                <a href="javascript:;">三页</a>
                <ol>
                    <li>
                        <a href="javascript:;">页三1</a>
                    </li>
                    <li>
                        <a href="javascript:;">页三2</a>
                    </li>

                </ol>
            </li>
            <li>
                <a href="javascript:;">四页</a>
                <ol>
                    <li>
                        <a href="javascript:;">页四1</a>
                    </li>
                    <li>
                        <a href="javascript:;">页四2</a>
                    </li>
                    <li>
                        <a href="javascript:;">页四3</a>
                    </li>
                    <li>
                        <a href="javascript:;">页四4</a>
                    </li>
                </ol>
            </li>
            <li>
                <a href="javascript:;">五页</a>
                <ol>
                    <li>
                        <a href="javascript:;">页五1</a>
                    </li>
                    <li>
                        <a href="javascript:;">页五2</a>
                    </li>

                </ol>
            </li>
        </ul>
    </nav>

二级菜单ol就是嵌套在外面ul的li里面，再相对于它来绝对定位。

CSS结构

        * {
            margin: 0;
            padding: 0;
        }
        
        ul,
        ol,
        li {
            list-style: none;
        }
        
        a {
            color: #333;
            text-decoration: none;
        }
        
        .clearfix {
            content: "";
            display: table;
            clear: both
        }
        
        .navLvOne {
            width: 100%
        }
        
        .navLvOne>li {
            float: left;
            width: 16.66%;
            position: relative;
            background-color: #dedede;
        }
        
        .navLvOne>li>a,
        .navLvOne>li>ol>li>a {
            line-height: 40px;
            height: 40px;
            display: block;
            width: 100%;
            text-align: center;
        }
        
        .navLvOne>li>a:hover {
            box-shadow: 0 0 1px #ccc;
        }
        
        .navLvOne>li>ol>li>a {
            color: #333;
        }
        
        .navLvOne>li>ol>li>a:hover {
            background-color: #ccc;
            color: #000;
        }
        
        .navLvOne>li>ol {
            transition: all 200ms ease-in-out;
            display: none;
            opacity: 0;
            width: 100%;
            position: absolute;
            top: 40px;
            left: 0;
            background-color: #fdfdfd;
        }

最上面的是一些css样式重置，然后基本上用到了最多的是css里的子选择器，入目且是的赶脚啊！

JS结构

        var olis = document.getElementById("navLvOne").children;

        for (var i = 1; i < olis.length; i++) {

            olis[i].onmouseover = function() {
                // 先把下拉菜单全部隐藏
                for (var l = 1; l < olis.length; l++) {
                    olis[l].lastElementChild.style.display = "none";
                    olis[l].lastElementChild.style.opacity = "0";
                }
                // 当前的this需要先保存下来，这样setTimeout里才能引用到
                var _this = this;
                this.lastElementChild.style.display = "block";
                // 先设置为block后再变opacity的值，这样过渡才有效果
                setTimeout(function() {
                    _this.lastElementChild.style.opacity = "1";
                }, 10);

            }

            // 在下拉菜单里划出时，隐藏它
            olis[i].lastElementChild.onmouseout = function() {
                this.style.display = "none";
                this.style.opacity = "0";
            }


        }

基本关键的点，都已经备注了相应的解释。如果对此有兴趣，可以好好研究下！

最近在看《你不知道的JavaScript》，很好的一套书，也推荐大家细细读。
入门的话，红宝书---《javascript高级程序设计》、犀牛书--《JavaScript学习指南》。