3.5.2 导航nav

3.5.2 导航nav

nav元素是一个可以用作页面导航的链接组,nav元素中的链接可以指向页面中的内容,也可指向其他页面或资源。并不是所有链接组都要使用nav元素,应该只对重要的链接组使用nav元素。具体来说,nav元素可以用于以下场合:

(1)传统导航条。现在主流网站上都有不同层级的导航条,其作用是将当前画面跳转到网站的其他主要页面上去,例如图3-13所示招商银行网站页面中的两行主导航条。

(2)侧边栏导航条。现在主流网站上都有侧边栏导航条,尤其是博客网站和商品网站,其作用是从当前文章或当前商品页面跳转到其他文章或其他商品页面上去,例如图3-13所示招商银行网站页面中右侧的侧边栏导航是一组使用不同方式登录银行的链接组。

(3)页内导航。页内导航的作用是在本页面几个主要的组成部分之间进行跳转。

(4)翻页操作。翻页操作是指在多个页面的前后页或博客网站的前后文章之间滚动。

除此之外,nav元素也可以用于其他所有设计者觉得重要的导航链接组中。

HTML5不推荐对辅助性的页脚链接(如“使用条款”“版权声明”“隐私政策”等)使用nav元素,例如图3-14所示招商银行网站的页脚,因为使用nav元素的链接组都应该是HTML页面中重要的链接组。但是有的网站会在页脚处再次显示顶级全局导航或者其他重要链接,在这种情况下,还是推荐将页脚中的此类链接放入nav元素中,例如图3-15所示优酷网站的页脚。

图3-13 招商银行网站页面中的链接组

图3-14 招商银行网站页脚

图3-15 优酷网站页脚

nav元素的代码可以参考3.5.1节,该节的例子描述的是放在页眉处的导航链接组。如果是侧边栏中的导航链接组,可以将nav元素放在aside元素中;如果是页脚中的导航链接组,可以将nav元素放在footer元素中;如果是正文中的重要导航链接组,也可以将nav元素放在article元素或者section元素中。nav元素中的链接组一般由ul元素(无序列表)或ol元素(有序列表)进行结构化,而链接组的样式外观由CSS设定,这在第7章、第8章会详细介绍。