如何 - 垂直菜单
了解如何使用 CSS 创建垂直菜单。
垂直菜单
如何创建垂直按钮组
步骤 1) 添加 HTML
示例
<div class="vertical-menu">
<a href="#" class="active">主页</a>
<a href="#">链接 1</a>
<a href="#">链接 2</a>
<a href="#">链接 3</a>
<a href="#">链接 4</a>
</div>
步骤 2) 添加 CSS
示例
.vertical-menu {
width: 200px; /* 如果你喜欢，可以设置一个宽度 */
}
.vertical-menu a {
background-color: #eee; /* 灰色背景色 */
color: black; /* 黑色文字颜色 */
display: block; /* 使链接彼此出现在下方 */
padding: 12px; /* 添加一些填充 */
text-decoration: none; /* 从链接中删除下划线 */
}
.vertical-menu a:hover {
background-color: #ccc; /* 鼠标悬停时显示深灰色背景 */
}
.vertical-menu a.active {
background-color: #04AA6D; /* 为“活动/当前”链接添加绿色 */
color: white;
}
亲自试一试 »
垂直滚动菜单
设置一个特定的 height 并添加 overflow 属性来创建垂直滚动菜单。
提示： 查看我们的 如何 - 侧边导航 教程，了解如何创建固定全高侧边导航。
