前端入坑紀(jì) 12

最近忙得跟什么似的，今天難得抽空終于可以來更新簡書了。
想來最近做了個二級下拉菜單，樣式草草，請君略之~

截圖

OK，first things first！項目鏈接

HTML 結(jié)構(gòu)

    <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結(jié)構(gòu)

        * {
            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里的子選擇器，入目且是的趕腳?。?/p>

JS結(jié)構(gòu)

        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";
                }
                // 當(dāng)前的this需要先保存下來，這樣setTimeout里才能引用到
                var _this = this;
                this.lastElementChild.style.display = "block";
                // 先設(shè)置為block后再變opacity的值，這樣過渡才有效果
                setTimeout(function() {
                    _this.lastElementChild.style.opacity = "1";
                }, 10);

            }

            // 在下拉菜單里劃出時，隱藏它
            olis[i].lastElementChild.onmouseout = function() {
                this.style.display = "none";
                this.style.opacity = "0";
            }


        }

基本關(guān)鍵的點，都已經(jīng)備注了相應(yīng)的解釋。如果對此有興趣，可以好好研究下！

最近在看《你不知道的JavaScript》，很好的一套書，也推薦大家細細讀。
入門的話，紅寶書---《javascript高級程序設(shè)計》、犀牛書--《JavaScript學(xué)習(xí)指南》。