用CSS開發時髦的導覽列圖例教程_經驗交流

製作容易的網站導覽欄是 CSS真正展現自己特有能力的一個領域。製作導航條的老方法傾向於依賴大量的圖片、巢狀表格格和Javascript指令碼 – 所有這些都會嚴重影響網站的可用性和無障礙性。如果你的網站不能在一個不支援Javascript的裝置上被導航，那麼你不僅阻止了關閉Javascript的使用者，同時你也阻止了只支援文本的裝置，比如螢幕助讀程式已經搜尋引擎的機器人程式 – 它們將永遠無法從你的首頁得到網站內容的索引。就算你的客戶不在乎無障礙性，告訴他們笨重的菜單阻止他們得到一個體面的搜尋引擎排名！

CSS允許你創造具有吸引力的導覽列，採用CSS的優勢在於不僅僅它在外觀上非常美觀，實際上它還是文本 – 是一種採用特殊方法標註的文本，它能夠讓所有那些物理上沒法看到你的設計但是又想得到你的內容的人或者裝置無障礙和容易理解地訪問你的網站。在本文中，我們將看看各種各樣建立基於CSS的導覽列解決方案。其中有一些適合在已有網站實施，以便使這些網站引導更迅速，並且通過替換古板的、基於圖片的導覽列來促進它的無障礙性。另外一些更適合整合於純粹的CSS網站布局中。

如何把一個結構化的列表樣式化為導覽列菜單？

對於新設計的網站，你可能會嘗試避免使用表格來做布局，或者只是在絕對必要的地方才使用表格。因此，一個不涉及到表格的導覽列解決方案是有用的，同時，通過杜絕表格元素的使用，你會發現你的頁面將包含更少的標記符號。

解決方案

導覽列系統是使用者在這個網站能夠訪問的地點的列表。因此，一個無序的列表是標記你的導覽列的理想方式。象你看到的，在圖1中的導覽列的實現是採用CSS樣式化的一個列表。

圖1：樣式化列表的導覽列"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Lists as navigation

content="text/html; charset=utf-8" />

• Recipes
• Contact Us
• Articles
• Buy Online

#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元素，就象下面這樣：

• Recipes
• Contact Us
• Articles
• Buy Online

接著,選擇一個適合的ID把列表包含在一個div中：

• Recipes
• Contact Us
• Articles
• Buy Online

象下面圖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，這使得那些連結顯示為塊元素，這樣的話當你游標划過這些導航“按鈕”時，顯示的效果和使用圖片導航一模一樣。

