CSS縱向導航菜單實現代碼

作者：div_css 2010-09-13 14:17:42

縱向導航菜單也是網站應用中的一種重要形式，而所謂CSS縱向導航菜單是指放置在網頁左側或右側的從上至下排列的一種導航形式。

這里向大家描述一下CSS縱向導航菜單實現方法，CSS縱向導航菜單是指放置在網頁左側或右側的從上至下排列的一種導航形式，這里通過實例向大家講解一下它的實現方法，相信本文介紹一定會讓你有所收獲。

CSS縱向導航菜單實現

縱向導航菜單也是網站應用中的一種重要形式，所謂CSS縱向導航菜單是指放置在網頁左側或右側的從上至下排列的一種導航形式。先看一下效果吧！

CSS縱向導航菜單效果

如圖所示的CSS縱向導航菜單效果，我們先看一下代碼結構：

<dividdivid="nav"> 
<h1>CSS</h1> 
<h2><ahrefahref="#">css入門</a></h2> 
<h2><ahrefahref="#">css進階</a></h2> 
<h2><ahrefahref="#">css高級</a></h2> 
<h1>webUI</h1> 
<h2><ahrefahref="#">理論知識</a></h2> 
<h2><ahrefahref="#">實戰應用</a></h2> 
<h2><ahrefahref="#">高級技巧</a></h2> 
<h1>DOM</h1> 
<h2><ahrefahref="#">DOM入門</a></h2> 
<h2><ahrefahref="#">DOM應用</a></h2> 
<h2><ahrefahref="#">DOM與瀏覽器</a></h2> 
<h1>XHTML</h1> 
<h2><ahrefahref="#">參考手冊</a></h2> 
<h2><ahrefahref="#">交流論壇</a></h2> 
</div>

從以上可以看出，這次的XHTML部分的代碼橫向代碼略有不同，我們沒有繼續使用ul和li標簽，其實繼續使用ul元素也能完好的實現縱向導航系統，但是在這風景點我們希望更多的提供不同途徑來展現css而已設計的靈活與方便性以便于拋磚引玉，開拓更多的設計思想。

這一次采用的是div+h1+h2的形式。我們使用div標簽設定了一個導航的結構區域。在這個區域中我們使用了h1來作二級分類的標題，h2來做二級分類下面的細節內容。在XHTML的講法意義中，h1,h2,h3這些標簽本身就具有用于對文本進行層級劃分的意義，直接使用h1,h2來表示層級關系，相對于在標簽中加入id或class來做層級的標記更為簡單和直觀，在這里使用h1,h2來標記不同級別的分類名稱也實在是再合適不過了。我們來看一看css代碼的設計：

#nav{width:100px;border-color:#c5c6c4;  
border-style:solid;border-width:0px1px1px1px;}  
#navh1{margin:0px;padding:4px;font-size:12px;  
font-weight:bold;font-family:Verdana;  
border-top:1pxsolid#c5c6c4;background-color:#CCCCCC;}  
#navh2{margin:0px;padding:4px;  
font-size:12px;font-family:Verdana;font-weight:normal;}  
#navh2a{color:#666666;text-decoration:none;}  
#navh2a:hover{color:#999999;text-decoration:underline;}

此實現CSS縱向導航菜單的CSS代碼部分采用了簡化寫法，如果哪句意思看不懂，您可以在Dreamweaver中打開選擇編輯樣式表即可查看具體是哪一項了，相信經過這樣幾次練習，這些代碼您已經能完全看懂了，說明您離高手又近了一步了。

大家可能已經注意到了，#nav的邊框本例中只設置了左右下和一像素，而沒有上，而在h1的樣式里設置了上部的上像素？這是為什么呢？因為h1的樣式上部都有一條橫線，如果nav上部再有一條橫線的話成長兩條了，結果顯示出來就是兩像素的高度了。#p#

完整代碼如下：

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"  
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<metahttp-equivmetahttp-equiv="Content-Type"content="text/html;charset=gb2312"/> 
<title>CSS縱向導航菜單</title> 
<style> 
#nav{width:100px;border-color:#c5c6c4;  
border-style:solid;border-width:0px1px1px1px;}  
#navh1{margin:0px;padding:4px;font-size:12px;  
font-weight:bold;font-family:Verdana;  
border-top:1pxsolid#c5c6c4;background-color:#CCCCCC;}  
#navh2{margin:0px;padding:4px;font-size:12px;  
font-family:Verdana;font-weight:normal;}  
#navh2a{color:#666666;text-decoration:none;}  
#navh2a:hover{color:#999999;text-decoration:underline;}  
 
</style> 
</head> 
<body> 
<dividdivid="nav"> 
<h1>CSS</h1> 
<h2><ahrefahref="#">css入門</a></h2> 
<h2><ahrefahref="#">css進階</a></h2> 
<h2><ahrefahref="#">css高級</a></h2> 
<h1>webUI</h1> 
<h2><ahrefahref="#">理論知識</a></h2> 
<h2><ahrefahref="#">實戰應用</a></h2> 
<h2><ahrefahref="#">高級技巧</a></h2> 
<h1>DOM</h1> 
<h2><ahrefahref="#">DOM入門</a></h2> 
<h2><ahrefahref="#">DOM應用</a></h2> 
<h2><ahrefahref="#">DOM與瀏覽器</a></h2> 
<h1>XHTML</h1> 
<h2><ahrefahref="#">參考手冊</a></h2> 
<h2><ahrefahref="#">交流論壇</a></h2> 
</div> 
</body> 
</html>

【編輯推薦】

DIV+CSS滑動門技術簡介
暢談DIV排版和table排版的區別
14大CSS工具提高網頁設計效率
實現DIV圖片居中方法揭秘
鼠標經過時改變DIV背景顏色的三種途徑

責任編輯：佚名來源： aa25.cn

CSS縱向導航菜單