1. 橫向?qū)Ш讲藛?/h5>
導(dǎo)航菜單實際上相當(dāng)于一個列表腔寡，自然地坎藐，我們可以選擇HTML中的列表元素ul來進行實現(xiàn)：
HTML ↓：
<ul id="nav">
<li><a href="#">首頁</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本身是一個塊級元素涂籽，其中包含的列表項li同樣也是塊級元素。所以要實現(xiàn)橫向菜單，我們需要使用到浮動钻弄，使得列表項li在同一行依次排列。此外者吁，無序列表ul默認會在每個列表項前帶一個小圓點窘俺，我們需要通過list-style將其取消掉。還有關(guān)鍵的一點就是复凳，我們通過超鏈接a來實現(xiàn)可點擊的菜單項瘤泪，但由于a本身是行內(nèi)元素，所以我們需要將其設(shè)置為塊級元素使得可以方便地設(shè)置寬高和邊距等：
CSS ↓：
#nav{
height:26px;
list-style: none; /*取消列表項前默認的小圓點*/
border-bottom: 2px solid #2788da;
}
#nav li{
float: left; /*浮動列表項育八，使其成為一個個橫向布局的容器*/
}
#nav li a{
color: #000;
text-decoration: none; /*取消超鏈接默認的下劃線*/
padding-top: 4px;
display: block; /*更改為塊級元素以設(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>
實現(xiàn)方式一：直接使用h1~h6構(gòu)造
HTML ↓：
<div id="category">
<h1>CSS</h1>
<h2>基礎(chǔ)</h2>
<h2>進階</h2>
<h2>實戰(zhàn)</h2>
<h1>HTML</h1>
<h2>基礎(chǔ)</h2>
<h2>進階</h2>
<h2>實戰(zhàn)</h2>
<h1>JS</h1>
<h2>基礎(chǔ)</h2>
<h2>進階</h2>
<h2>實戰(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等標題元素實現(xiàn)的縱向菜單
實現(xiàn)方式二：和橫向菜單一樣使用ul元素構(gòu)造
HTML ↓：
<ul id="category">
<li class="parent">CSS</li>
<li>基礎(chǔ)</li>
<li>進階</li>
<li>實戰(zhàn)</li>
<li class="parent">HTML</li>
<li>基礎(chǔ)</li>
<li>進階</li>
<li>實戰(zhàn)</li>
<li class="parent">JS</li>
<li>基礎(chǔ)</li>
<li>進階</li>
<li>實戰(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實現(xiàn)的縱向菜單
3. 橫向下拉菜單
有了橫向菜單的實現(xiàn)基礎(chǔ)髓棋，現(xiàn)在其實只要對需要的部分添加相應(yīng)列表就可以實現(xiàn)下拉菜單了实檀。
HTML ↓：
<ul id="nav">
<li>
<a class="top-a" href="#">首頁</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; /*取消列表項前默認的小圓點*/
border-bottom: 2px solid #2788da;
}
#nav li{
width: 130px;
float: left; /*浮動列表項惶洲，使其成為一個個橫向布局的容器*/
}
#nav li a.top-a{
color: #000;
text-decoration: none; /*取消超鏈接默認的下劃線*/
padding-top: 4px;
display: block; /*更改為塊級元素以設(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)膳犹，只通過CSS的改變就能輕松實現(xiàn)縱向彈出菜單恬吕。考慮到彈出菜單可能會發(fā)生層疊以及每個彈出菜單應(yīng)該相對于其父級菜單定位须床，因此可以結(jié)合使用position:relative和position:absolute進行實現(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; /*相對于父級菜單進行定位*/
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;
}
效果如下 ↓：
縱向彈出菜單
