Bagaimana untuk membuat: tombol navigasi samping

Bagaimana untuk membuat penuh penyerapan navigasi samping

Langkah pertama - Tambahkan HTML:

<div id="mySidenav" class="sidenav">
  <a href="#" id="about">Tentang</a>
  <a href="#" id="blog">Blog</a>
  <a href="#" id="projects">Proyek</a>
  <a href="#" id="contact">Hubungi</a>
</div>

kedudukan kedua - Tambahkan 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 /* 浅黑色 */
}

Coba sendiri

Halaman yang berhubungan

Tutorial:Navigasi CSS