1. 背景

垂直导航栏可以说是相当常见，尤其是在一些管理系统中，左侧往往是一个垂直导航栏，便于用户快速切换菜单。

本篇就来实现一个简单的垂直导航栏，最终效果如下：

2. 实现过程

2.1 创建ul导航栏

首先使用ul创建导航栏基本内容，并指定样式类为nav。

 <ul class="nav"><li><a href="#">新闻中心</a></li><li><a href="#">解决方案</a></li><li><a href="#">产品介绍</a></li><li><a href="#">荣誉资质</a></li><li><a href="#">加入我们</a></li><li><a href="#">关于我们</a></li></ul>

此时效果如下：

2.2 优化列表样式

默认的列表有点难看，尤其是大黑点项目符号，所以使用list-style-type去掉它，同时设置列表的内外边距为0。

     .nav {margin: 0;padding: 0;list-style-type: none;}

此时效果：

2.3 设置导航栏整体风格

我们希望导航栏是一种淡绿色背景，具备灰色边框，宽度为200px：

     .nav {margin: 0;padding: 0;list-style-type: none;width: 200px;background-color: rgb(221, 221, 204);border: 1px solid rgb(218, 218, 216);}

此时效果如下：

注意颜色是我用VSCode根据感觉随便选的，如果是正式项目的话建议请专业美工设计配色方案，下图为我是用VSCode选取配色的情景，还是挺方便的。

2.4 优化超级链接样式

将超级链接的下划线去掉，同时颜色改为黑色，并为其添加灰色的边框。

         .nav a {color: black;text-decoration: none;border: 1px solid rgb(136, 136, 132);}

此时效果如下：

通过设置超链接显示类型为block块类型，让超链接占满一行。然后通过内边距，让显示内容松散一些。

     .nav a {color: black;text-decoration: none;border: 1px solid rgb(136, 136, 132);display: block;padding: 8px 36px;}

此时效果如下：

2.5 添加图标

通过超级链接的背景图，为超链接添加图标。通过设置水平、垂直位置，让图标向左移动(5%)并且垂直居中(50%)，最后调整背景图的尺寸。

         .nav a {color: black;text-decoration: none;border: 1px solid rgb(136, 136, 132);display: block;padding: 8px 36px;background: url(./arrow.png) no-repeat 5% 50%;background-size: 20px 20px;}

效果如下，图片是我从阿里巴巴矢量图标库下载的免费资源。

2.6 添加悬停、点击效果

悬停时，背景色变深色、字体颜色变蓝，这样能突出显示。点击时我喜欢使用斜体，这样有一种动态的感觉：

     .nav a:hover {color: rgb(61, 52, 229);background-color: rgb(201, 201, 118);}.nav a:active {font-style: italic;}

最终效果如下：

3. 小结

垂直导航栏应用广泛，制作起来也不麻烦。

CSS技能点--垂直导航栏实例相关推荐

css:动画高级垂直导航栏王者荣耀导航栏
垂直导航栏 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...
【纯html+css垂直导航栏代码】
纯html+css垂直导航栏代码 <!DOCTYPE html> <html lang="en"> <head><meta charset ...
使用html，css实现简单的导航栏
标题:使用html,css实现简单的导航栏一.实现过程首先通过ul,li实现一个无序列表,添加背景得到如图所示的样式[文档流] 让li浮动,使得垂直排列–>水平排列,[注意需要开启bfc,让 ...
php 3d animation,CSS_纯CSS实现菜单、导航栏的3D翻转动画效果，我曾经向大家展示过闪光的logo - phpStudy...
纯CSS实现菜单.导航栏的3D翻转动画效果我曾经向大家展示过闪光的logo,燃烧的火狐狸,多重嵌套动画等例子,今天,我们将要制作一个简单但非常酷的3D翻转菜单.大家可以先看看实际效果,下面有效果截图 ...
水平导航栏和垂直导航栏
效果图: 垂直导航栏: <!DOCTYPE html> <html lang="en"> <head><meta charset=&quo ...
php导航条css代码生成器,怎么使用css代码制作网站导航栏？（示例）
本篇文章主要给大家介绍关于如何用css做导航栏的相关知识,希望对有需要的朋友有所帮助.对于任何一个网站来说,导航栏的存在是至关重要的,那么如果仅仅只是用html做出枯燥乏味的导航菜单,效果肯定是不佳的 ...
前端组件从零之垂直导航栏
今天继续组件文章的分享.结合上一次讲到的水平导航栏,今天就讲讲垂直导航栏.其实原理和水平导航栏原理其实差不多类似,那么就来谈谈. 说到垂直导航栏,用到最多的地方就是电商网页,特别像淘宝,天猫,京东,苏 ...
直播app开发搭建，纯css/html实现侧边导航栏
直播app开发搭建,纯css/html实现侧边导航栏 css代码: *{margin: 0px;padding: 0px;}#box{position: absolute;height: 300px; ...
精致纯CSS打造绿色漂亮导航栏
代码简介: 极精致的纯CSS实现的菜单,兼容性非常好,条例WEB标准,能用性好,用到有修饰图片,请根据代码地址自己下载. 代码内容: <!DOCTYPE html PUBLIC "-/ ...

CSS技能点--垂直导航栏实例

文章目录