侧边导航按钮

---

了解如何使用 CSS 创建可悬停的侧边导航按钮。

---

亲自试一试 »

---

如何创建可悬停的侧边导航

步骤 1) 添加 HTML:

实例

<div id="mySidenav" class="sidenav">
  <a href="#" id="about">About</a>
  <a href="#" id="blog">Blog</a>
  <a href="#" id="projects">Projects</a>
  <a href="#" id="contact">Contact</a>
</div>

---

步骤 2) 添加 CSS:

实例

/* 为 sidenav 内的链接设置样式 */
#mySidenav a {
  position: absolute; /* 相对于浏览器窗口定位它们 */
  left: -80px; /* 将它们放在屏幕之外 */
  transition: 0.3s; /* 在悬停时添加过渡 */
  padding: 15px; /* 15px 内边距 */
  width: 100px; /* 设置特定宽度 */
  text-decoration: none; /* 删除下划线 */
 font-size: 20px; /* 增加字体大小 */
  color: white; /* 白色文本颜色 */
  border-radius: 0 5px 5px 0; /* 右上角和右下角的圆角 */
}

#mySidenav a:hover {
  left: 0; /* 鼠标悬停时，使元素按应有的方式显示 */
}

/* about 链接:距离顶部 20 像素，背景为绿色 */
#about {
  top: 20px;
  background-color: #4CAF50;
}

#blog {
  top: 80px;
  background-color: #2196F3; /* Blue */
}

#projects {
  top: 140px;
  background-color: #f44336; /* Red */
}

#contact {
  top: 200px;
  background-color: #555 /* 浅黑色 */
}
亲自试一试 »

提示: 转到我们的 CSS 导航栏教程，了解有关导航栏的更多信息。