如何創建：側邊導航按鈕

如何創建可懸停的側邊導航

第一步 - 添加 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 /* 淺黑色 */
}

親自試一試

相關頁面

教程：CSS 導航欄