使用CSS制作垂直導(dǎo)航菜單的簡(jiǎn)易方法
作為一個(gè)成功的網(wǎng)站，導(dǎo)航菜單是永遠(yuǎn)不可缺少的。導(dǎo)航菜單的風(fēng)格往往也決定了整個(gè)網(wǎng)站的風(fēng)格，因此很多設(shè)計(jì)者都會(huì)投入很多時(shí)間和精力來(lái)制作各式各樣的導(dǎo)航條，從而體現(xiàn)網(wǎng)站的整體構(gòu)架。在傳統(tǒng)方式下，制作導(dǎo)航菜單是
作為一個(gè)成功的網(wǎng)站，導(dǎo)航菜單是永遠(yuǎn)不可缺少的。導(dǎo)航菜單的風(fēng)格往往也決定了整個(gè)網(wǎng)站的風(fēng)格，因此很多設(shè)計(jì)者都會(huì)投入很多時(shí)間和精力來(lái)制作各式各樣的導(dǎo)航條，從而體現(xiàn)網(wǎng)站的整體構(gòu)架。在傳統(tǒng)方式下，制作導(dǎo)航菜單是很麻煩的工作。需要使用表格，設(shè)置復(fù)雜的屬性，還需要使用JavaScript實(shí)現(xiàn)相應(yīng)鼠標(biāo)指針經(jīng)過(guò)或點(diǎn)擊動(dòng)作。如果用CSS來(lái)制作導(dǎo)航菜單，實(shí)現(xiàn)起來(lái)就非常簡(jiǎn)單了。
建立HTML結(jié)構(gòu)
首先建立HTML相關(guān)結(jié)構(gòu)，將菜單的各個(gè)項(xiàng)用項(xiàng)目列表`
- `表示，同時(shí)設(shè)置頁(yè)面的背景顏色，代碼如下：
- `標(biāo)記添加下邊線，以分割各個(gè)超鏈接，并且對(duì)超鏈接``標(biāo)記進(jìn)行整體設(shè)置。
```css
navigation li {
border-bottom: 1px solid 9F9FED; /* 添加下劃線 */
}
navigation li a {
display: block;
height: 1em;
padding: 5px 5px 5px 0.5em;
text-decoration: none;
border-left: 12px solid 151571; /* 左邊的粗邊 */
border-right: 1px solid 151571; /* 右側(cè)陰影 */
}
```
通過(guò)設(shè)定`display: block;`，超鏈接被設(shè)置成塊元素，實(shí)現(xiàn)鼠標(biāo)在任何位置激活鏈接的效果。
3. 最后設(shè)置超鏈接的樣式，以實(shí)現(xiàn)動(dòng)態(tài)菜單的效果。
```css
navigation li a:link,
navigation li a:visited {
background-color: 1136c1;
color: FFFFFF;
}
navigation li a:hover {
background-color: 002099; /* 改變背景色 */
color: ffff00; /* 改變文字顏色 */
border-left: 12px solid yellow;
}
```
以上代碼中的具體含義都在注釋中詳細(xì)說(shuō)明了。完成這些設(shè)置后，導(dǎo)航菜單制作就完成了，最終的效果如圖所示，在不同瀏覽器中顯示效果一致。
```html
```
設(shè)置CSS樣式
然后開始設(shè)置CSS樣式，為頁(yè)面的背景色設(shè)置淺色，代碼如下：
```css
body {
background-color: dee0ff;
}
```
此時(shí)頁(yè)面的效果只是最普通的項(xiàng)目列表。
設(shè)定樣式屬性
1. 設(shè)置整個(gè)`
- `的屬性，將項(xiàng)目符號(hào)設(shè)置為不顯示。
```css
navigation {
width: 150px;
font-family: Arial;
font-size: 14px;
text-align: right;
}
navigation ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}
```
通過(guò)以上設(shè)置后，項(xiàng)目列表使顯示為普通的超鏈接列表。
2. 為`