提供能够适应任意大小文字或者任意数量内容的站点导航栏

一个网站的导航栏常常成为其设计方案的支柱。导航栏是一个重要且关键的页面组件。传统情况下，W eb  设计师会打开一个他熟悉的图片编辑软件，细心地绘制一些 按钮、选项卡和塞在嵌套的<table>中的文本。之后，再用 JavaScript 触发通过变换 图片实现的翻转效果。最后，成品可能看起来还不错，但是潜伏在这表面底下的内容 可就不是那么吸引人了。接下来，我们会去研究一种创建 W e b 站点导航栏的常用方 法，到那时您就会发现这一点。

下面仔细研究一个例子：使用传统的方法设计精美的基于图片的选项卡式导航栏。 在分析完这个例子的不足之后，我们将改正这些不足并构造出一个效果类似的但却无懈可击的设计方法，它仅仅使用了一些简洁而规范的 HTML 代码、三张小图片以及 CSS。

2.1　常见的方法

我决定使用来自LanceArmstrong.com网站的主导航栏的选项卡作为我们这一节的例子。这主要有两个原因：首先，我是 La nc e  A r ms t r on g 的车迷；其次，也是更重要 的一点，是我们可以使用 CSS 对这个设计案例进行重构，从而增进它的灵活性。我们 的任务是以一种富有创造性的方式来使用 CSS，这样不但可以消除大块的冗余代码，还 可以使站点的可维护性和适应性大大增强。让我们把它放大，剖析一下构成选项卡的各个对象。见图 2 - 1 。

图 2-1　LanceArmstrong.com 页面上设计精美的选项卡导航栏可显示出各选项卡的选中和未选中状态

2.1.1　选项卡

在这些选项卡中有一处精妙的细节，使其比普通的边框背景式导航栏更加吸引人。 对于每一个选中和未选中状态，选项卡在其上面部分有轻柔的颜色渐变效果，垂直方 向上颜色逐渐淡出直至与背景色相融合：白色代表选中状态、淡黄则代表未选中状 态。在每个选项卡的顶部有一条单像素的高亮区域。这部分要比其他的阴影处稍亮一 些，这增加了一点立体效果，就好像有一个光源从页面顶部照下来一样( 图 2 - 2 ) 。

图 2 - 2 　这是选项卡每一个状态的设计细节的特写。注意在每一个选项卡的顶部都有一条纤细的高亮区域，并带有颜色渐变效果，以此模拟出立体及光源的效果

这些选项卡看起来确实很酷。尽管设计的好与坏更多是一种主观判断，但是我们至少应该承认，LanceArmstrong.com 的设计师一定花费了大量的时间，才使得这个导 航栏既吸引人又很实用。这也是选择这个实例的原因。

在 LanceArmstrong.com 上，每一组选项卡都是单独的一张图片，包括了各个选项卡的选中和未选中的不同状态。具体显示哪张图片，要由当前所浏览的页面决定。这 些图片都包括了站点的 logo。图 2-3 展示的是所使用的四张图片中的任意一张。

图 2 -3 　一张单独的大图片中包括了整套的选项卡和 logo。站点还至少包括了三张类似的图片，每一张都有一个选项卡是高亮的

2.1.2　通常的翻转效果

L a n c e A r m s t r o n g s . c o m 的导航栏并没有图片翻转的特效，但是通过增加一些

J avaScri pt 代码，并预先加载另外一组图片，翻转效果就可以实现了。但是，这会增 加大量的代码，在 2.3 节中我们将对其进行重构，那时会对这组选项卡添加翻转效果。 我们将仅仅通过几行 CSS 来实现，从而避免了增加更多的代码、图片和 J a va Scr ipt。 所以，从表面上看，我们有了一组精心设计的，与站点整体外观及感觉相一致的 导航选项卡。可以点击任一选项卡去浏览相应的站点内容，每个选项卡都有相应的文字标识。好，那么现在我们要深入地去研究一下，摆脱掉束缚，探寻一种能够达到近似的设计效果的替代方法。