垂直导航栏

垂直导航栏实例

创建背景色为灰色的基础垂直导航栏，并在用户将鼠标移到链接上时改变链接的背景色：

• Home
• News
• Contact
• About

实例

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;
}

/* 鼠标悬停时改变链接颜色 */
li a:hover {
  background-color: #555;
  color: white;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

活动/当前导航链接

向当前链接添加 "active" 类，以使用户知道他/她在哪个页面上：

• Home
• News
• Contact
• About

实例

.active {
  background-color: #4CAF50;
  color: white;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

居中链接以及添加边框

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

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

• Home
• News
• Contact
• About

实例

ul {
  border: 1px solid #555;
}

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

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

运行实例 »

点击 "运行实例" 按钮查看在线实例

全高固定垂直导航栏

创建全高的“粘性”侧面导航：

实例

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 25%;
  background-color: #f1f1f1;
  height: 100%; /* 全高 */
  position: fixed; /* 使它产生粘性，即使在滚动时 */
  overflow: auto; /* 如果侧栏的内容太多，则启用滚动条 */
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

注意：本例在移动设备上可能无法正常工作。