DIVCSS菜單：縱向CSS菜單實例之橙色記憶_DIV+CSS實例

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

　　我們在MB5U.com的文章中，介紹了不少CSS橫向菜單的制作方法與思路。今天我們說說豎向菜單的制作。橫向菜單主要是通過浮動，讓本來按列顯示的元素變成一行顯示，而豎向菜單的制作就相對簡單了很多，最主要的還是在于視覺效果。我們看今天制作的CSS豎向菜單的最終效果，如下圖：

　　我們定義一個UL無序列表作為菜單的容器，設(shè)置其左邊框及背景圖片。讓菜單項自行從上而下的排列，定義鏈接鼠標懸停時的背景與UL的背景有所區(qū)別。這款菜單就這樣簡單的搞定了。我們看下面的XHTML代碼：

示例代碼 [www.wf0088.com]

<ul id="menu">
<li><a href="http://www.wf0088.com/" title="">MB5U.com首頁</a></li>
<li><a href="http://www.wf0088.com/" title="">Div CSS教程</a></li>
<li><a href="http://www.wf0088.com/" title="">CSS布局實例</a></li>
<li><a href="http://www.wf0088.com/" title="">CSS2.0教程</a></li>
<li><a href="http://www.wf0088.com/" title="">CSS酷站欣賞</a></li>
<li><a href="http://www.wf0088.com/" title="">CSS模板下載</a></li>
<li><a href="http://www.wf0088.com/" title="">CSS在線手冊</a></li>
<li><a href="http://www.wf0088.com/" title="">XHTML教程</a></li>
</ul>

　　XHTML代碼沒啥好說的了。我們說說CSS代碼：

示例代碼 [www.wf0088.com]

* {
font-size:13px;
font-weight:800;
text-decoration:none;
margin:0;
padding:0;
}
body {
background:#fff;
}

　　整體布局聲明，文字大小及加粗，去除文字裝飾線。邊距與填充均為零。設(shè)置body的背景色為白色#fff，我們經(jīng)常忽略body背景色的設(shè)置，總是認為瀏覽器默認的網(wǎng)頁背景色就是白色的，其實不然，有些時候并非都是白色，為了更加嚴謹，我們還是聲明body的背景色為白色。

示例代碼 [www.wf0088.com]

#menu {
list-style-type: none;
border-left:10px solid #f60;
margin:50px auto;
width:160px;
height:247px;
overflow:hidden;
background:#fff url(bga_mb5u.com.jpg) 1px 0 repeat-y;
}

　　UL無序列表menu，去除列表項預(yù)設(shè)標簽，設(shè)置左邊框為10px的橙色實線。邊距設(shè)置為上下50px，左右為自動，實現(xiàn)了UL的水平居中對齊于瀏覽器窗口。設(shè)置寬度與高度分別是160px、247px（為什么設(shè)置這樣的高度看下面的說明），溢出設(shè)置為隱藏，背景為白色，圖片距離左側(cè)1px，垂直方向重復(fù)。

示例代碼 [www.wf0088.com]

#menu li {
border-bottom:1px solid #fff;
}
#menu li a {
display:block;
color:#fffeee;
text-indent:26px;
line-height:30px;
}
#menu li a:hover {
background:#fff url(bgb_mb5u.com.jpg) 1px 0 repeat-y;
}

　　設(shè)置列表項li的下邊框為1px的白色#fff實線。設(shè)置鏈接a為塊元素，文字顏色為淡黃色#fffeee，文字縮進26px，行高為30px。鼠標懸停時鏈接產(chǎn)生背景（顏色及圖片），顏色為白色#fff，背景圖片產(chǎn)生了變化，在UL中背景圖片是：bga_mb5u.com.jpg。在鏈接懸停狀態(tài)中背景圖片是：bgb_mb5u.com.jpg。

　　關(guān)于UL高度設(shè)置為247px的說明：

　　通過上面的設(shè)置我們注重到，列表項的下邊框有一個1px的白色實線。假如我們?nèi)サ鬠L的高度設(shè)置將會看到如下效果：

　　在紅色圓圈內(nèi)箭頭所指的部分，UL的左邊框10px的實線凸出了一點點。這就是因為列表項的下邊框有一個1px的白色實線。讓整個菜單看起來不是那么完美了。

　　我們發(fā)現(xiàn)共用八個菜單，每個菜單的高度是30px（行高） 1px（li的下邊框線）=31px。通過這些我們可以計算出UL的合理高度應(yīng)該是：31px*8-1px=247px。這就是我們設(shè)置UL的高度為247px的原因，當然，為了正常顯示我們設(shè)置溢出為隱藏。這樣就達到了最終的較完美效果。