思洋互动网站建设学前班

导航条承载着网站的导航和分流作用，它是每个网站不可缺少的元素，导航条设计得优美能给浏览者留下深刻的印象，很多Web设计人员应该都研究过不少导航条设计方法，但很难找到一种完美的设计方法。我们首先从一个典型的HTML结构说起，下图展示了一个常见的导航条。

图 1 常见导航条示意图

要实现上图所示的导航条，其HTML代码其实十分简单，除了一个<div>层，以及它包含的无序列表元素（ul和li）外就没有其它东西了。此外，你可能已经知道，HTML 5引入了一个新的元素 - <nav>标签，它表示一个导航条，使用<nav>可以代替更复杂的<div>标签，但从下面的代码你就知道，其实HTML 5并没有改变导航条的基础结构。（相关文章推荐：细谈HTML 5新增的元素）

图1所示导航条对应的HTML 4代码示例：

广州网站建设,网站建设,广州网页设计,广州网站设计

1. <div id="nav"> 
2. <ul> 
3. <li><a href="/index">Home</a></li> 
4. <li><a href="/link1">Link 1</a></li> 
5. <li><a href="/link2">Link 2</a></li> 
6. <ul> 
7. </div> 

图1所示导航条对应的HTML 5代码示例：

1. <nav> 
2. <ul> 
3. <li><a href="/index">Home</a></li> 
4. <li><a href="/link1">Link 1</a></li> 
5. <li><a href="/link2">Link 2</a></li> 
6. <ul> 
7. </nav> 

无论是使用HTML 4还是使用HTML 5，使用无序列表元素组织导航条总是一个很好的方法，特别是当你在主菜单和子菜单之间实现了比较复杂的交互时更是如此。此外，这种方法允许你通过CSS对导航条的不同元素实现更多控制，从而简化自定义操作。

图 2 带有子菜单的导航条

下面是带有子菜单导航条的HTML代码结构示例：

广州网站建设,网站建设,广州网页设计,广州网站设计

1. <div id="nav"> <!-- nav container --> 
2. <ul> 
3. <li><a href="/link1">Link 1</a> <!-- main item --> 
4. <ul> <!-- item submenu --> 
5. <li><a href="/s-link1">Sub Link 1</a></li> 
6. <li><a href="/s-link2">Sub Link 2</a></li> 
7. </ul> <!-- close submenu --> 
8. </li> 
9. <ul> 
10. </div>