CSS 制作垂直导航

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

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

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

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

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

图6-12 列表的默认样式

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

1. ul {
2.      margin: 0;
3.      padding: 0;
4.      list-style: none;
5. }

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

1. .verticalnav {
2.     width: 120px;
3. }

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

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

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

1. .verticalnav a {
2.     display: block;
3.     height: 32px;
4.     line-height: 32px;
5.     text-align: center;
6.     color: #666;
7.     font-size: 12px;
8.     text-decoration: none;
9. }

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

1. .verticalnav li a:hover, 
2. .verticalnav li a:focus {
3.     color: #ff5f3e;
4. }
5. .verticalnav li a.current {
6.     color: #ff5f3e;
7.     border-left: 4px solid #ff5f3e;
8. }

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

图6-13 垂直导航

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。