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. 小结
垂直导航栏应用广泛,制作起来也不麻烦。