DIVCSS菜單：黑白灰?guī)в嘘幱靶Ч腃SS橫向菜單_DIV+CSS實例

教程Tag：暫無Tag,歡迎添加,賺取U幣!

　　今天我們具體了解一下它是如何工作的。看下面的最終效果圖片：（可點擊放大）

　　首先我們看XHTML代碼：

示例代碼 [hl5o.cn]

<ul id="menu">
<li><a href="http://hl5o.cn/">MB5U.com首頁MB5U.com首頁</a></li>
<li><a href="http://hl5o.cn/">Div CSS教程Div CSS教程</a></li>
<li><a href="http://hl5o.cn/">CSS布局實例CSS布局實例</a></li>
<li><a href="http://hl5o.cn/">CSS2.0教程CSS2.0教程</a></li>
</ul>

　　我們定義了一個id為menu的無序列表作為菜單的容器，里面的列表項li就是我們的菜單欄了。我們在列表項li中的鏈接a標(biāo)簽內(nèi)，放置了一個內(nèi)聯(lián)對象span，它就是陰影效果載體，我們通過CSS定義，實現(xiàn)陰影效果。

　　我們看下面的CSS代碼：

示例代碼 [hl5o.cn]

#menu {
padding:0;
margin:0;
height:2em;
list-style-type:none;
border-left:1px solid #bbb;
}
#menu li {
float:left;
width:8em;
height:2em;
line-height:2em;
border-right:1px solid #bbb;
position:relative;
text-align:center;
}

　　我們定義menu這個無序列表的填充與邊距均為零。高度為2em。清除默認(rèn)列表項預(yù)設(shè)標(biāo)記。定義菜單中的列表項為向左浮動，寬度與高度分別是2em。行高為2em，實現(xiàn)了文字的垂直居中。設(shè)置相對定位，并設(shè)置文字水平居中對齊。

　　請注重：我們給ul設(shè)置了左邊框為1px的實線，顏色是灰色。border-left:1px solid #bbb; 我們給li設(shè)置了右邊框為1px的實績，顏色是灰色。border-right:1px solid #bbb; 這樣就實現(xiàn)了左右都存在分割的線條了，請看下面的圖示（可點擊放大）。

　　我們繼續(xù)CSS代碼的編寫：

示例代碼 [hl5o.cn]

#menu li a, #menu li a:visited {
display:block;
text-decoration:none;
color:#000;
}
#menu li a span, #menu li a:visited span {
display:none;
}

　　我們定義鏈接的link與visited狀態(tài)的樣式，設(shè)置塊元素，沒有裝飾線，顏色為#000；并且在link與visited狀態(tài)下鏈接元素內(nèi)的span元素為不可見：display:none。

示例代碼 [hl5o.cn]

#menu li a:hover {
border:0;
color:#bbb;
}
#menu li a:hover span {
display:block;
width:8em;
height:2em;
text-align:center;
position:absolute;
left:-1px;
top:-2px;
color:#000;
cursor:pointer;
}

　　在hover鼠標(biāo)懸停時，鏈接的文字顏色為#bbb。即陰影文字的顏色。而此時span內(nèi)聯(lián)元素中的文字的設(shè)置發(fā)生了巨大的變化，我們來看代碼。設(shè)置成塊元素，寬度與高度分別是8em、2em。文字水平居中對齊，采用絕對定位，距左與距頂分別是-1px、-2px。文字顏色為黑色，鼠標(biāo)指點為：pointer。

　　實現(xiàn)的原理與思路小結(jié)：在正常狀態(tài)下，鏈接內(nèi)的文字是黑色的，而鏈接span元素內(nèi)的文字是不可見的。當(dāng)鼠標(biāo)懸停時。將鏈接文字設(shè)置為淡灰色的陰影，鏈接span元素內(nèi)的文字設(shè)置成黑色，并且其位置向左及向上略移一點點。這樣就實現(xiàn)了這款菜單的效果。

　　我們看完整的CSS代碼：

示例代碼 [hl5o.cn]

#menu {
padding:0;
margin:0;
height:2em;
list-style-type:none;
border-left:1px solid #bbb;
}
#menu li {
float:left;
width:8em;
height:2em;
line-height:2em;
border-right:1px solid #bbb;
position:relative;
text-align:center;
}
#menu li a, #menu li a:visited {
display:block;
text-decoration:none;
color:#000;
}
#menu li a span, #menu li a:visited span {
display:none;
}
#menu li a:hover {
border:0;
color:#bbb;
}
#menu li a:hover span {
display:block;
width:8em;
height:2em;
text-align:center;
position:absolute;
left:-1px;
top:-2px;
color:#000;
cursor:pointer;
}