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 上开源。

CSS 制作垂直导航相关推荐

CSS 制作手风琴导航
在垂直导航中,如果存在多个分级,常常使用手风琴导航,它会以手风琴方式展开和折叠,来节约空间. 简单的说,手风琴导航就是垂直导航的层层嵌套,需要多少级,就嵌套多少层.这里就以两级导航为例,来介绍手风琴导 ...
CSS制作垂直口风琴2
<!doctype html> <html lang="en"> <head><meta charset="UTF-8" ...
CSS制作的导航菜单向上箭头
使用纯CSS技术制作导航菜单上的向上箭头图标,不使用图片,用CSS实现,挑战自己的CSS布局水平,最终效果自己满意,如果您对此感兴趣的话,就要好好研究一下CSS代码啦. <!DOCTYPE ht ...
css作个课程导航,CSS 制作网页导航条(下)
上节课我们将导航条做成了下面的效果但是此时的导航条还没有链接,还不能点击,这节课我们就要做一个完整的导航条 [第四步] 我们需要将上面的导航条做以下几个修改 1)给上面的导航加上链接: 2)链接文字 ...
HTML+CSS实战(一)——导航条菜单的制作
一.垂直导航菜单的制作 1.基本的样式清除: *{margin:0;padding:0} 2.无序列表圆点去除: ul{list-style:none} 3.下划线去除: a{text-decorat ...
css制作动态按钮导航栏,巧妙使用checkbox制作纯css动态导航栏
前提:很多时候.我们的网页都需要一个垂直的导航栏.可以分类.有分类.自然就有展开.关闭的功能.你还在使用jquery操作dom来制作吗?那你就out了! 方案:使用checkbox 的 checked ...
css制作漂亮彩带导航条菜单
点击这里查看效果: http://keleyi.com/keleyi/phtml/divcss/17.htm 效果图: 以下是源代码: 1 <!DOCTYPE html PUBLIC " ...
html制作课程导航页面,学成在线页面制作（HTML+CSS部分）（顶部+轮播图部分）...
学成在线页面制作(HTML+CSS部分)(顶部+轮播图部分) 成品截图前期准备素材一.项目页面PSD源文件二.前期准备工作三.CSS属性书写顺序四.布局分析五.布局流程开始页面制作头部 ...
CSS实现垂直/水平导航栏
文章目录一级基本导航栏怎么显示?导航栏 = 链接列表垂直导航栏水平导航栏二级导航栏垂直二级水平二级动画效果考虑导航栏位置和导航栏下方内容位置行内元素和块级元素的具体区别是什么?in ...

CSS 制作垂直导航

CSS 制作垂直导航相关推荐

最新文章

热门文章