【51CTO譯文】導(dǎo)航條承載著網(wǎng)站的導(dǎo)航和分流作用，它是每個網(wǎng)站不可缺少的元素，導(dǎo)航條設(shè)計得優(yōu)美能給瀏覽者留下深刻的印象，很多Web設(shè)計人員應(yīng)該都研究過不少導(dǎo)航條設(shè)計方法，但很難找到一種***的設(shè)計方法。我們首先從一個典型的HTML結(jié)構(gòu)說起，下圖展示了一個常見的導(dǎo)航條。

圖 1 常見導(dǎo)航條示意圖

要實(shí)現(xiàn)上圖所示的導(dǎo)航條，其HTML代碼其實(shí)十分簡單，除了一個<div>層，以及它包含的無序列表元素（ul和li）外就沒有其它東西了。此外，你可能已經(jīng)知道，HTML 5引入了一個新的元素 - <nav>標(biāo)簽，它表示一個導(dǎo)航條，使用<nav>可以代替更復(fù)雜的<div>標(biāo)簽，但從下面的代碼你就知道，其實(shí)HTML 5并沒有改變導(dǎo)航條的基礎(chǔ)結(jié)構(gòu)。（相關(guān)文章推薦：細(xì)談HTML 5新增的元素）

圖1所示導(dǎo)航條對應(yīng)的HTML 4代碼示例：

<div id="nav"> 
<ul> 
<li><a href="/index">Home</a></li> 
<li><a href="/link1">Link 1</a></li> 
<li><a href="/link2">Link 2</a></li> 
<ul> 
</div> 

圖1所示導(dǎo)航條對應(yīng)的HTML 5代碼示例：

<nav> 
<ul> 
<li><a href="/index">Home</a></li> 
<li><a href="/link1">Link 1</a></li> 
<li><a href="/link2">Link 2</a></li> 
<ul> 
</nav> 

無論是使用HTML 4還是使用HTML 5，使用無序列表元素組織導(dǎo)航條總是一個很好的方法，特別是當(dāng)你在主菜單和子菜單之間實(shí)現(xiàn)了比較復(fù)雜的交互時更是如此。此外，這種方法允許你通過CSS對導(dǎo)航條的不同元素實(shí)現(xiàn)更多控制，從而簡化自定義操作。

圖 2 帶有子菜單的導(dǎo)航條

下面是帶有子菜單導(dǎo)航條的HTML代碼結(jié)構(gòu)示例：

<div id="nav"> <!-- nav container --> 
<ul> 
<li><a href="/link1">Link 1</a> <!-- main item --> 
<ul> <!-- item submenu --> 
<li><a href="/s-link1">Sub Link 1</a></li> 
<li><a href="/s-link2">Sub Link 2</a></li> 
</ul> <!-- close submenu --> 
</li> 
<ul> 
</div> 

#p#

CSS代碼建議

下面是對編寫良好的CSS代碼收集的三個簡單的建議。

1、給<li>標(biāo)簽設(shè)置的“height”屬性值應(yīng)等于給<ul>標(biāo)簽設(shè)置的“height”屬性值，如果高度不一致，會出現(xiàn)多余的空白區(qū)域，會破壞頁面的美感，可維護(hù)性也很差。

圖 3 <li>和<ul>標(biāo)簽的高度屬性應(yīng)該相等

2、如果想***地垂直對齊文本，只需將<li>標(biāo)簽和<ul>標(biāo)簽的“line-height”屬性值設(shè)為一樣即可。

 
圖 4 ***的文本垂直對齊方法

3、如果想讓鏈接所在的整個區(qū)域都可點(diǎn)擊，只需將<a>標(biāo)簽的“display”屬性設(shè)為“block”即可。

圖 5 讓鏈接所在的整個區(qū)域都可點(diǎn)擊

#p#

與頁面交互

你可以在導(dǎo)航條的項(xiàng)目和用戶訪問的某個頁面之間創(chuàng)建各種類型的交互，一個最簡單的交互是將特定標(biāo)簽的狀態(tài)改為“激活”狀態(tài)，例如，如果當(dāng)前頁面是主頁，或當(dāng)前的文章屬于導(dǎo)航條中的某個特定分類，如下圖所示，當(dāng)前頁面顯示的文章屬于“Apple”分類，因此導(dǎo)航條中的“Apple”菜單就處于激活狀態(tài)。

圖 6 導(dǎo)航條狀態(tài)與頁面內(nèi)容的交互

如果你使用WordPress，你可以使用下面的代碼確定主頁，讓導(dǎo)航條上的“主頁”處于激活狀態(tài)。

<?php if(is_home()){ ?> 
<li class="active">Home</li> 
<?php } else { ?> 
<li><a href="<?php echo get_option('home'); ?>">Home</a></li> 
<?php } ?> 

如果你使用的是基于分類的導(dǎo)航條，當(dāng)當(dāng)前的文章屬于某個分類時，你可以使用下面的代碼高亮顯示該分類的標(biāo)簽。例如，假設(shè)你的導(dǎo)航條有一項(xiàng)叫做“Apple”，當(dāng)前顯示的文章剛好歸于“Apple”分類，那你可以使用下面的激活“Apple”標(biāo)簽。

<?php 
global $post;  
$categories = get_the_category();  
foreach($categories as $category) {  
$cat_name = $category->cat_name;  
} ?> 
<ul> 
<?php if(!is_home() && $cat_name=='Apple'){?> 
<li class="active-sn">Apple</li> 
<?php } else { ?> 
<li><a href="<?php echo get_option('home'); ?>/category/apple">Apple</a> 
</li><?php } ?> 
<ul> 

其實(shí)導(dǎo)航條一點(diǎn)也不復(fù)雜，看了本文是不是豁然開朗了許多，也許你還有自己的想法，不妨和大家分享一下吧！

原文作者：Antonio Lupetti                      黃永兵 譯  

原文地址：http://woorkup.com/2010/08/09/best-practices-to-design-a-perfect-html-navigation-bar/

【本文是51CTO精選譯文，轉(zhuǎn)載請務(wù)必標(biāo)明作者和出處！】

【編輯推薦】 

1. HTML 5中的五個應(yīng)用亮點(diǎn)
2. Ruby on Rails導(dǎo)航菜單自動生成的方法
3. ASP.NET四種頁面導(dǎo)航方式的比較與選擇