1. 橫向?qū)Ш讲藛?/h5>

---

導(dǎo)航菜單實(shí)際上相當(dāng)于一個(gè)列表，自然地，我們可以選擇HTML中的列表元素ul來(lái)進(jìn)行實(shí)現(xiàn)：

HTML ↓：

<ul id="nav">
    <li><a href="#">首頁(yè)</a></li>
    <li><a href="#" class="current">探索</a></li>
    <li><a href="#">觀察</a></li>
    <li><a href="#">解密</a></li>
    <li><a href="#">關(guān)于</a></li>
</ul>

ul本身是一個(gè)塊級(jí)元素，其中包含的列表項(xiàng)li同樣也是塊級(jí)元素。所以要實(shí)現(xiàn)橫向菜單，我們需要使用到浮動(dòng)，使得列表項(xiàng)li在同一行依次排列。此外，無(wú)序列表ul默認(rèn)會(huì)在每個(gè)列表項(xiàng)前帶一個(gè)小圓點(diǎn)，我們需要通過(guò)list-style將其取消掉。還有關(guān)鍵的一點(diǎn)就是，我們通過(guò)超鏈接a來(lái)實(shí)現(xiàn)可點(diǎn)擊的菜單項(xiàng)，但由于a本身是行內(nèi)元素，所以我們需要將其設(shè)置為塊級(jí)元素使得可以方便地設(shè)置寬高和邊距等：

CSS ↓：

#nav{
    height:26px;
    list-style: none; /*取消列表項(xiàng)前默認(rèn)的小圓點(diǎn)*/
    border-bottom: 2px solid #2788da;
}
#nav li{
    float: left; /*浮動(dòng)列表項(xiàng)，使其成為一個(gè)個(gè)橫向布局的容器*/
}
#nav li a{
    color: #000;
    text-decoration: none; /*取消超鏈接默認(rèn)的下劃線*/
    padding-top: 4px;
    display: block; /*更改為塊級(jí)元素以設(shè)置寬高、邊距*/
    width: 97px;
    height:22px;
    text-align: center;
    background-color: #ececec;
    margin-left: 1px;
}
#nav li a:hover{
    background-color: #bbb;
    color: #fff;
}
#nav li a.current{
    background-color: #2788da;
    color: #fff;
}

效果如下 ↓：

橫向菜單

最后的工作，就是添加JS交互使得菜單擁有切換效果：

JavaScript：

var nav = document.getElementById('nav');
nav.addEventListener('click', function (e) {
    if (e.target.tagName === 'A') {
        for (var i = 0; i < this.children.length; i++) {
            var element = this.children[i].children[0];
            element.removeAttribute('class');
        }
        e.target.className = 'current';
    }
});

2. 縱向?qū)Ш讲藛?/h5>

---

實(shí)現(xiàn)方式一：直接使用h1~h6構(gòu)造

HTML ↓：

<div id="category">
    <h1>CSS</h1>
        <h2>基礎(chǔ)</h2>
        <h2>進(jìn)階</h2>
        <h2>實(shí)戰(zhàn)</h2>
    <h1>HTML</h1>
        <h2>基礎(chǔ)</h2>
        <h2>進(jìn)階</h2>
        <h2>實(shí)戰(zhàn)</h2>
    <h1>JS</h1>
        <h2>基礎(chǔ)</h2>
        <h2>進(jìn)階</h2>
        <h2>實(shí)戰(zhàn)</h2>
</div>

CSS ↓：

#category{
    width: 100px;
    border-color: #c5c6c4;
    border-style: solid;
    border-width: 0 1px 1px 1px;
}
#category h1,#category h2{
    text-align: center;
    margin: 0;
    padding: 5px;
    font-size: 12px;
}
#category h1{
    border-top: 1px solid #c5c6c4;
    background-color: #f4f4f4;
}
#category h2{
    font-weight: normal;
}
#category h2:hover{
    cursor: pointer;
    background-color: #ececec;
}

效果如下 ↓：

用h1等標(biāo)題元素實(shí)現(xiàn)的縱向菜單

實(shí)現(xiàn)方式二：和橫向菜單一樣使用ul元素構(gòu)造

HTML ↓：

<ul id="category">
    <li class="parent">CSS</li>
    <li>基礎(chǔ)</li>
    <li>進(jìn)階</li>
    <li>實(shí)戰(zhàn)</li>
    <li class="parent">HTML</li>
    <li>基礎(chǔ)</li>
    <li>進(jìn)階</li>
    <li>實(shí)戰(zhàn)</li>
    <li class="parent">JS</li>
    <li>基礎(chǔ)</li>
    <li>進(jìn)階</li>
    <li>實(shí)戰(zhàn)</li>
</ul>

CSS ↓：

#category{
    width: 100px;
    border-color: #c5c6c4;
    border-style: solid;
    border-width: 0 1px 1px 1px;
}
#category li{
    text-align: center;
    padding: 5px 0;
}
#category li.parent{
    border-top: 1px solid #c5c6c4;
    border-bottom: 1px solid #c5c6c4;
    background-color: #f4f4f4;
    font-weight: bold;
}
#category li:not(.parent):hover{
    cursor: pointer;
    background-color: #ececec;
}

效果如下 ↓：

用ul實(shí)現(xiàn)的縱向菜單

3. 橫向下拉菜單

有了橫向菜單的實(shí)現(xiàn)基礎(chǔ)，現(xiàn)在其實(shí)只要對(duì)需要的部分添加相應(yīng)列表就可以實(shí)現(xiàn)下拉菜單了。

HTML ↓：

<ul id="nav">
    <li>
        <a class="top-a" href="#">首頁(yè)</a>
    </li>
    <li>
        <a class="top-a" href="#">探索</a>
        <ul class="inner-ul">
            <li><a href="#">Explore</a></li>
            <li><a href="#">Explore</a></li>
        </ul>
    </li>
    <li>
        <a class="top-a" href="#">觀察</a>
        <ul class="inner-ul">
            <li><a href="#">Observation</a></li>
            <li><a href="#">Observation</a></li>
        </ul>
    </li>
    <li>
        <a class="top-a" href="#">解密</a>
        <ul class="inner-ul">
            <li><a href="#">Decrypt</a></li>
            <li><a href="#">Decrypt</a></li>
        </ul>
    </li>
    <li>
        <a class="top-a" href="#">關(guān)于</a>
        <ul class="inner-ul">
            <li><a href="#">Corporation</a></li>
            <li><a href="#">Team</a></li>
        </ul>
    </li>
</ul>

CSS ↓：

#nav{
    height:26px;
    list-style: none; /*取消列表項(xiàng)前默認(rèn)的小圓點(diǎn)*/
    border-bottom: 2px solid #2788da;
}
#nav li{
    width: 130px;
    float: left; /*浮動(dòng)列表項(xiàng)，使其成為一個(gè)個(gè)橫向布局的容器*/
}
#nav li a.top-a{
    color: #000;
    text-decoration: none; /*取消超鏈接默認(rèn)的下劃線*/
    padding-top: 4px;
    display: block; /*更改為塊級(jí)元素以設(shè)置寬高、邊距*/
    width: 130px;
    height:22px;
    text-align: center;
    background-color: #ececec;
    margin-left: 1px;
}
#nav li a:hover{
    background-color: #bbb;
    color: #fff;
}
ul#nav li ul.inner-ul{
    list-style: none;
}
ul#nav li ul.inner-ul li{
    text-align: center;
}
ul#nav li ul.inner-ul{
    display: none;
}
ul#nav li:hover ul.inner-ul{
    display: block; /*這里的選擇器是關(guān)鍵*/
}
ul#nav li ul.inner-ul a{
    display: block;
    width:130px;
    height:22px;
    text-decoration: none;
    background-color: #ececec;
}
ul#nav li ul.inner-ul a:hover{
    background-color: #bbb;
}

效果如下 ↓：

橫向下拉菜單

4. 縱向彈出菜單

使用上面橫向下拉菜單的HTML結(jié)構(gòu)，只通過(guò)CSS的改變就能輕松實(shí)現(xiàn)縱向彈出菜單?？紤]到彈出菜單可能會(huì)發(fā)生層疊以及每個(gè)彈出菜單應(yīng)該相對(duì)于其父級(jí)菜單定位，因此可以結(jié)合使用position:relative和position:absolute進(jìn)行實(shí)現(xiàn)。

CSS ↓：

ul{
    list-style: none;
    width: 130px;
    border-bottom: 1px solid #ccc;
    font-size: 16px;
    background-color: #ececec;
}
ul a{
    text-decoration: none;
}
ul#nav li{
    position: relative;
    text-align: center;
}
ul#nav li:hover{
    background-color:#fff;
}
li ul{
    position: absolute; /*相對(duì)于父級(jí)菜單進(jìn)行定位*/
    left: 129px;
    top: 0;
    display: none;
}
li ul a{
    display: block;
    text-decoration: none;
    color: #777;
    background: #fff;
    padding: 5px;
    border: 1px solid #ccc;
    border-bottom: 0;
}
ul#nav li:hover ul{
    display: block;
}

效果如下 ↓：

縱向彈出菜單