制作容易的站點導航欄是CSS真正展現自己特有能力的一個領域。制作導航條的老方法傾向于依賴大量的圖片、嵌套表格和Javascript腳本 – 所有這些都會嚴重影響站點的可用性和無障礙性。如果你的站點不能在一個不支持Javascript的設備上被導航，那么你不僅阻止了關閉Javascript的用戶，同時你也阻止了只支持文本的設備，比如屏幕閱讀器已經搜索引擎的機器人程序 – 它們將永遠無法從你的首頁得到網站內容的索引。就算你的客戶不在乎無障礙性，告訴他們笨重的菜單阻止他們得到一個體面的搜索引擎排名！
CSS允許你創造具有吸引力的導航欄，采用CSS的優勢在于不僅僅它在外觀上非常美觀，實際上它還是文本 – 是一種采用特殊方法標注的文本，它能夠讓所有那些物理上沒法看到你的設計但是又想得到你的內容的人或者設備無障礙和容易理解地訪問你的站點。在本文中，我們將看看各種各樣建立基于CSS的導航欄解決方案。其中有一些適合在已有站點實施，以便使這些站點引導更迅速，并且通過替換古板的、基于圖片的導航欄來促進它的無障礙性。另外一些更適合集成于純粹的CSS站點布局中。
如何把一個結構化的列表樣式化為導航欄菜單？
對于新設計的網站，你可能會嘗試避免使用表格來做布局，或者只是在絕對必要的地方才使用表格。因此，一個不涉及到表格的導航欄解決方案是有用的，同時，通過杜絕表格元素的使用，你會發現你的頁面將包含更少的標記符號。
解決方案
導航欄系統是用戶在這個站點能夠訪問的地點的列表。因此，一個無序的列表是標記你的導航欄的理想方式。象你看到的，在圖1中的導航欄的實現是采用CSS樣式化的一個列表。
圖1：樣式化列表的導航欄!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
head>
title>Lists as navigation/title>
meta http-equiv="content-type"
content="text/html; charset=utf-8" />
link rel="stylesheet" type="text/css" href="listnav1.css" />
/head>
body>
div id="navigation">
ul>
li>a href="#">Recipes/a>/li>
li>a href="#">Contact Us/a>/li>
li>a href="#">Articles/a>/li>
li>a href="#">Buy Online/a>/li>
/ul>
/div>
/body>
/html>
#navigation {
width: 200px;
}
#navigation ul {
list-style: none;
margin: 0;
padding: 0;
}
#navigation li {
border-bottom: 1px solid #ED9F9F;
}
#navigation li a:link, #navigation li a:visited {
font-size: 90%;
display: block;
padding: 0.4em 0 0.4em 0.5em;
border-left: 12px solid #711515;
border-right: 1px solid #711515;
background-color: #B51032;
color: #FFFFFF;
text-decoration: none;
}
討論
為了創建一個基于無序列表的導航欄，首先建立你的列表，把每個導航鏈接放入li元素，就象下面這樣：
ul>
li>a href="#">Recipes/a>/li>
li>a href="#">Contact Us/a>/li>
li>a href="#">Articles/a>/li>
li>a href="#">Buy Online/a>/li>
/ul>
接著,選擇一個適合的ID把列表包含在一個div中：
div id="navigation">
ul>
li>a href="#">Recipes/a>/li>
li>a href="#">Contact Us/a>/li>
li>a href="#">Articles/a>/li>
li>a href="#">Buy Online/a>/li>
/ul>
/div>
象下面圖2看到的，這個標記在瀏覽器的缺省樣式下面看上相當普通。
圖2：沒有樣式化的基礎列表
我們需要做的第一件事情是樣式化導航欄存在的容器 – 在這里是 #navigation ：
#navigation {
width: 200px;
}
在這里我簡單的給了#navigation一個寬度。如果這個導航系統是CSS頁面布局的一部分，我可能還會給這個ID添加一些位置信息。
下面，我們樣式化列表：
#navigation ul {
list-style: none;
margin: 0;
padding: 0;
}
象圖3展示的，上面的規則移除了缺省狀態下瀏覽器顯示一個列表時出現的前置符號和縮進。
圖3 移除縮進和前置符的列表
下一步是使用#navigation樣式化li元素，給它們一個底邊：
#navigation li {
border-bottom: 1px solid #ED9F9F;
}
最后，我們樣式化link：
#navigation li a:link, #navigation li a:visited {
font-size: 90%;
display: block;
padding: 0.4em 0 0.4em 0.5em;
border-left: 12px solid #711515;
border-right: 1px solid #711515;
background-color: #B51032;
color: #FFFFFF;
text-decoration: none;
}
到此大多數工作已經做好。我們建立的這個CSS規則包括增加左右邊界，移除下劃線等等。在這個規則中第一個屬性定義把顯示屬性設為block，這使得那些鏈接顯示為塊元素，這樣的話當你光標劃過這些導航“按鈕”時，顯示的效果和使用圖片導航一模一樣。
您可能感興趣的文章:- css實現會折疊、展開的菜單導航欄效果
- JQuery 浮動導航欄實現代碼
- 用CSS開發時髦的導航欄第二篇
- 又一個漂亮的導航欄的下拉菜單
- JavaScript NodeTree導航欄(菜單項JSON類型/自制)
