快捷導(dǎo)航

用CSS開發(fā)時髦的導(dǎo)航欄圖例教程

更新時間：2008年05月26日 19:08:32 作者：

除非限制你自己只做單個頁面的網(wǎng)站，否則你都需要導(dǎo)航欄。事實(shí)上，導(dǎo)航欄是任何網(wǎng)站設(shè)計中最主要的部分之一，如果希望用戶很容易的在你的站點(diǎn)移動，導(dǎo)航欄的設(shè)計需要大量的思考。

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

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

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

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

解決方案

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

圖1：樣式化列表的導(dǎo)航欄<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>Lists as navigation</title>

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

</head>

<body>

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

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

<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看到的，這個標(biāo)記在瀏覽器的缺省樣式下面看上相當(dāng)普通。

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

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

#navigation {

width: 200px;

}

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

下面，我們樣式化列表：

#navigation ul {

list-style: none;

margin: 0;

padding: 0;

}

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

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

下一步是使用#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ī)則中第一個屬性定義把顯示屬性設(shè)為block，這使得那些鏈接顯示為塊元素，這樣的話當(dāng)你光標(biāo)劃過這些導(dǎo)航“按鈕”時，顯示的效果和使用圖片導(dǎo)航一模一樣。

您可能感興趣的文章: