如何创建：侧边导航按钮

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

第一步 - 添加 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>

第二步 - 添加 CSS：

/*设置侧边导航内链接的样式*/
#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链接：距顶部20px，绿色背景*/
#about {
  top: 20px;
  background-color: #04AA6D;
}
#blog {
  top: 80px;
  background-color: #2196F3; /*蓝色*/
}
#projects {
  top: 140px;
  background-color: #f44336; /*红色*/
}
#contact {
  top: 200px;
  background-color: #555 /*浅黑色*/
}

Essayer personnellement

Pages liées

Tutoriel :Barre de navigation CSS