制作容易的站點(diǎn)導(dǎo)航欄是CSS真正展現(xiàn)自己特有能力的一個(gè)領(lǐng)域。制作導(dǎo)航條的老方法傾向于依賴大量的圖片、嵌套表格和Javascript腳本 – 所有這些都會(huì)嚴(yán)重影響站點(diǎn)的可用性和無障礙性。如果你的站點(diǎn)不能在一個(gè)不支持Javascript的設(shè)備上被導(dǎo)航，那么你不僅阻止了關(guān)閉Javascript的用戶，同時(shí)你也阻止了只支持文本的設(shè)備，比如屏幕閱讀器已經(jīng)搜索引擎的機(jī)器人程序 – 它們將永遠(yuǎn)無法從你的首頁得到網(wǎng)站內(nèi)容的索引。就算你的客戶不在乎無障礙性，告訴他們笨重的菜單阻止他們得到一個(gè)體面的搜索引擎排名！

CSS允許你創(chuàng)造具有吸引力的導(dǎo)航欄，采用CSS的優(yōu)勢在于不僅僅它在外觀上非常美觀，實(shí)際上它還是文本 – 是一種采用特殊方法標(biāo)注的文本，它能夠讓所有那些物理上沒法看到你的設(shè)計(jì)但是又想得到你的內(nèi)容的人或者設(shè)備無障礙和容易理解地訪問你的站點(diǎn)。在本文中，我們將看看各種各樣建立基于CSS的導(dǎo)航欄解決方案。其中有一些適合在已有站點(diǎn)實(shí)施，以便使這些站點(diǎn)引導(dǎo)更迅速，并且通過替換古板的、基于圖片的導(dǎo)航欄來促進(jìn)它的無障礙性。另外一些更適合集成于純粹的CSS站點(diǎn)布局中。

如何把一個(gè)結(jié)構(gòu)化的列表樣式化為導(dǎo)航欄菜單？

對(duì)于新設(shè)計(jì)的網(wǎng)站，你可能會(huì)嘗試避免使用表格來做布局，或者只是在絕對(duì)必要的地方才使用表格。因此，一個(gè)不涉及到表格的導(dǎo)航欄解決方案是有用的，同時(shí)，通過杜絕表格元素的使用，你會(huì)發(fā)現(xiàn)你的頁面將包含更少的標(biāo)記符號(hào)。

解決方案

導(dǎo)航欄系統(tǒng)是用戶在這個(gè)站點(diǎn)能夠訪問的地點(diǎn)的列表。因此，一個(gè)無序的列表是標(biāo)記你的導(dǎo)航欄的理想方式。象你看到的，在圖1中的導(dǎo)航欄的實(shí)現(xiàn)是采用CSS樣式化的一個(gè)列表。

"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)建一個(gè)基于無序列表的導(dǎo)航欄，首先建立你的列表，把每個(gè)導(dǎo)航鏈接放入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>

接著,選擇一個(gè)適合的ID把列表包含在一個(gè)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看到的，這個(gè)標(biāo)記在瀏覽器的缺省樣式下面看上相當(dāng)普通。

圖2：沒有樣式化的基礎(chǔ)列表

我們需要做的第一件事情是樣式化導(dǎo)航欄存在的容器 – 在這里是 #navigation ：

#navigation {

width: 200px;

}

在這里我簡單的給了#navigation一個(gè)寬度。如果這個(gè)導(dǎo)航系統(tǒng)是CSS頁面布局的一部分，我可能還會(huì)給這個(gè)ID添加一些位置信息。

下面，我們樣式化列表：

#navigation ul {

list-style: none;

margin: 0;

padding: 0;

}

象圖3展示的，上面的規(guī)則移除了缺省狀態(tài)下瀏覽器顯示一個(gè)列表時(shí)出現(xiàn)的前置符號(hào)和縮進(jìn)。

圖3 移除縮進(jìn)和前置符的列表

下一步是使用#navigation樣式化li元素，給它們一個(gè)底邊：

#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)做好。我們建立的這個(gè)CSS規(guī)則包括增加左右邊界，移除下劃線等等。在這個(gè)規(guī)則中第一個(gè)屬性定義把顯示屬性設(shè)為block，這使得那些鏈接顯示為塊元素，這樣的話當(dāng)你光標(biāo)劃過這些導(dǎo)航“按鈕”時(shí)，顯示的效果和使用圖片導(dǎo)航一模一樣。