6.3.3 垂直导航

垂直导航主要用于网站的侧边栏导航，使用侧边栏的好处是可以节约空间。因此，一些内容多，而又喜欢简约的网站，常常以侧边栏的方式进行展示。

默认情况下，列表及列表项 li 元素都是块级元素，每个列表项后独占一行。因此，使用无序列表创建垂直导航就非常方便。

首先，创建一个无序列表来包裹导航链接：

<ul class = "verticalnav">
    <li><a href="#">公司简介</a></li>
    <li><a href="#">产品中心</a></li>
    <li><a class="current" href="#">工程案例</a></li>
    <li><a href="#">新闻动态</a></li>
    <li><a href="#">联系我们</a></li>
</ul>

这时预览，发现列表的内容都挤在一起，前面还有一个小圆点。并且，链接文本以蓝色显示，还带有下划线。如图 6‑12 所示：

这个小圆点是列表的默认项目符号，它会占据列表的空间。因此，通常需要重置列表的默认样式，将外边距、内边距设置为 0，并去掉默认的项目符号。当然，这些操作一般都是在全局 reset 中进行，如果你使用全局reset，这个步骤就不必做了。

ul {
     margin: 0;
     padding: 0;
     list-style: none;
}

接下来，通过列表元素的宽度，来控制整个导航所占用的水平空间。

.verticalnav {
    width: 120px;
}

再来设置导航链接的样式。在介绍按钮式链接时，曾经使用 padding 来增加链接的点击区域。但是，如果各个链接中的文本个数不同，则每个链接的宽度也不同，整个垂直导航就会参差不齐。

如果把容器设置为固定宽度，再把链接的 display 属性设置为 block，让它自动填满整个容器。这样一来，所有链接就具有相同的宽度，并且在链接区域的任何位置都能激活链接，一举两得。

同时，设置链接的高度，并通过 text-align 和 line-height 属性，让链接文本在水平方向和垂直方向居中显示。再根据上下文环境，为链接设置合适的颜色和字体。最后，去掉链接的默认下划线。

.verticalnav a {
    display: block;
    height: 32px;
    line-height: 32px;
    text-align: center;
    color: #666;
    font-size: 12px;
    text-decoration: none;
}

为了提醒用户，当鼠标悬停时，自动改变链接文本的颜色。另外，为了突显当前链接，定义一个 current 类，并通过不同的颜色和左边框进行标识，让用户一目了然。

.verticalnav li a:hover, 
.verticalnav li a:focus {
    color: #ff5f3e;
}
.verticalnav li a.current {
    color: #ff5f3e;
    border-left: 4px solid #ff5f3e;
}

好了，一个简约而漂亮的垂直导航就制作完成了。运行结果如图 6‑13 所示：