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

圖 1 常見導航條示意圖

要實現上圖所示的導航條，其HTML代碼其實十分簡單，除了一個<div>層，以及它包含的無序列表元素（ul和li）外就沒有其它東西了。此外，你可能已經知道，HTML 5引入了一個新的元素 - <nav>標簽，它表示一個導航條，使用<nav>可以代替更復雜的<div>標簽，但從下面的代碼你就知道，其實HTML 5并沒有改變導航條的基礎結構。（相關文章推薦：細談HTML 5新增的元素）

圖1所示導航條對應的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所示導航條對應的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，使用無序列表元素組織導航條總是一個很好的方法，特別是當你在主菜單和子菜單之間實現了比較復雜的交互時更是如此。此外，這種方法允許你通過CSS對導航條的不同元素實現更多控制，從而簡化自定義操作。

圖 2 帶有子菜單的導航條

下面是帶有子菜單導航條的HTML代碼結構示例：

<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>標簽設置的“height”屬性值應等于給<ul>標簽設置的“height”屬性值，如果高度不一致，會出現多余的空白區域，會破壞頁面的美感，可維護性也很差。

圖 3 <li>和<ul>標簽的高度屬性應該相等

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

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

3、如果想讓鏈接所在的整個區域都可點擊，只需將<a>標簽的“display”屬性設為“block”即可。

圖 5 讓鏈接所在的整個區域都可點擊

#p#

與頁面交互

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

圖 6 導航條狀態與頁面內容的交互

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

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

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

<?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> 

其實導航條一點也不復雜，看了本文是不是豁然開朗了許多，也許你還有自己的想法，不妨和大家分享一下吧！

原文作者：Antonio Lupetti                      黃永兵 譯  

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

【本文是51CTO精選譯文，轉載請務必標明作者和出處！】

【編輯推薦】 

1. HTML 5中的五個應用亮點
2. Ruby on Rails導航菜單自動生成的方法
3. ASP.NET四種頁面導航方式的比較與選擇