揭秘CSS(第 1 版)
6.3.3 垂直导航
阅读(

概述

CSS选择器

字体和文本

盒模型

元素的定位

链接和导航

链接的样式

列表的样式

创建导航

分页导航

面包屑导航

垂直导航

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

默认情况下,列表及列表项 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 所示:

列表的默认样式
图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 所示:

垂直导航
图6-13 垂直导航

关于作者

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

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验