如何创建 - 垂直菜单
了解如何使用 CSS 创建垂直菜单。
垂直菜单
如何创建垂直按钮组
步骤 1) 添加 HTML:
实例
<div class="vertical-menu">
<a href="#"
class="active">Home</a>
<a href="#">Link
1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 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: #4CAF50;
/* 为 "active/current" 链接添加绿色 */
color: white;
}
亲自试一试 »
垂直滚动菜单
如果需要垂直滚动菜单，请设置特定 height 高度并添加 overflow 溢出属性:
提示: 查看我们的 操作指南 - 侧边导航教程，了解如何创建固定的全高侧边导航。
