制作容易的站點導航欄是CSS真正展現(xiàn)自己特有能力的一個領域。制作導航條的老方法傾向于依賴大量的圖片、嵌套表格和Javascript腳本 – 所有這些都會嚴重影響站點的可用性和無障礙性。如果你的站點不能在一個不支持Javascript的設備上被導航，那么你不僅阻止了關閉Javascript的用戶，同時你也阻止了只支持文本的設備，比如屏幕閱讀器已經(jīng)搜索引擎的機器人程序 – 它們將永遠無法從你的首頁得到網(wǎng)站內(nèi)容的索引。就算你的客戶不在乎無障礙性，告訴他們笨重的菜單阻止他們得到一個體面的搜索引擎排名！
CSS允許你創(chuàng)造具有吸引力的導航欄，采用CSS的優(yōu)勢在于不僅僅它在外觀上非常美觀，實際上它還是文本 – 是一種采用特殊方法標注的文本，它能夠讓所有那些物理上沒法看到你的設計但是又想得到你的內(nèi)容的人或者設備無障礙和容易理解地訪問你的站點。在本文中，我們將看看各種各樣建立基于CSS的導航欄解決方案。其中有一些適合在已有站點實施，以便使這些站點引導更迅速，并且通過替換古板的、基于圖片的導航欄來促進它的無障礙性。另外一些更適合集成于純粹的CSS站點布局中。
如何把一個結構化的列表樣式化為導航欄菜單？
對于新設計的網(wǎng)站，你可能會嘗試避免使用表格來做布局，或者只是在絕對必要的地方才使用表格。因此，一個不涉及到表格的導航欄解決方案是有用的，同時，通過杜絕表格元素的使用，你會發(fā)現(xiàn)你的頁面將包含更少的標記符號。
解決方案
導航欄系統(tǒng)是用戶在這個站點能夠訪問的地點的列表。因此，一個無序的列表是標記你的導航欄的理想方式。象你看到的，在圖1中的導航欄的實現(xiàn)是采用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;
}
討論
為了創(chuàng)建一個基于無序列表的導航欄，首先建立你的列表，把每個導航鏈接放入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一個寬度。如果這個導航系統(tǒng)是CSS頁面布局的一部分，我可能還會給這個ID添加一些位置信息。
下面，我們樣式化列表：
#navigation ul {
list-style: none;
margin: 0;
padding: 0;
}
象圖3展示的，上面的規(guī)則移除了缺省狀態(tài)下瀏覽器顯示一個列表時出現(xiàn)的前置符號和縮進。
圖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;
}
到此大多數(shù)工作已經(jīng)做好。我們建立的這個CSS規(guī)則包括增加左右邊界，移除下劃線等等。在這個規(guī)則中第一個屬性定義把顯示屬性設為block，這使得那些鏈接顯示為塊元素，這樣的話當你光標劃過這些導航“按鈕”時，顯示的效果和使用圖片導航一模一樣。
您可能感興趣的文章:- css實現(xiàn)會折疊、展開的菜單導航欄效果
- JQuery 浮動導航欄實現(xiàn)代碼
- 用CSS開發(fā)時髦的導航欄第二篇
- 又一個漂亮的導航欄的下拉菜單
- JavaScript NodeTree導航欄(菜單項JSON類型/自制)
