CSS 垂直导航栏

垂直导航栏

要构建垂直导航栏，除了上一页的代码之外，您还可以设置列表内 <a> 元素的样式：

示例

li a {
display: block;
width: 60px;
}

亲自试一试 »

示例解释：

display: block;- 将链接显示为块元素使整个链接区域可点击（不仅仅是文本），并且它允许我们指定宽度（如果需要，还可以指定填充、边距、高度等）
width: 60px;- 块元素默认占据可用的全部宽度。我们想要指定 60 像素宽度

您还可以设置 <ul> 的宽度，并删除 <a> 的宽度，因为它们在显示为块元素时将占据可用的完整宽度。这将产生与前面的示例相同的结果：

示例

ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 60px;
}

li a {
display: block;
}

亲自试一试 »

垂直导航栏示例

创建一个具有灰色背景颜色的基本垂直导航栏，并在用户将鼠标移到链接上时更改链接的背景颜色：

示例

ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
}

li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}

/* Change the link color on hover */
li a:hover {
background-color: #555;
color: white;
}

亲自试一试 »

活动/当前导航链接

将 "active" 类添加到当前链接，让用户知道他/她在哪个页面：

示例

.active {
background-color: #04AA6D;
color: white;
}

亲自试一试 »

居中链接并添加边框

添加text-align:center到 <li> 或 <a> 以使链接居中。

添加border属性 <ul> 在导航栏周围添加边框。如果您还想在导航栏中添加边框，请添加border-bottom到所有 <li> 元素，除了最后一个：

示例

ul {
border: 1px solid #555;
}

li {
text-align: center;
border-bottom: 1px solid #555;
}

li:last-child {
border-bottom: none;
}

亲自试一试 »

全高固定垂直导航栏

创建全高"sticky" 侧边导航：

示例

ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 25%;
background-color: #f1f1f1;
height: 100%; /* Full height */
position: fixed; /* Make it stick, even on scroll */
overflow: auto; /* Enable scrolling if the sidenav has too much content */
}

亲自试一试 »

笔记：此示例可能无法在移动设备上正常运行。