如何創建：側邊導航

學習如何創建帶有動畫效果和可關閉功能的側邊導航菜單。






親自試一試

創建帶有動畫效果的側邊導航

第一步 - 添加 HTML：

<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>
<!-- 使用任意元素打開側邊導航 -->
<span onclick="openNav()">open</span>
<!-- 如果您希望側邊導航將頁面內容推向右方，請將所有頁面內容放在這個 div 內部（如果您只希望側邊導航停留在頁面頂部，則不使用此設置） -->
<div id="main">
  ...
</div>

第二步 - 添加 CSS：

/* 側邊導航菜單 */
.sidenav {
  height: 100%; /* 100% 全高 */
  width: 0; /* 0 寬 - 使用 JavaScript 更改此設置 */
  position: fixed; /* Stay in place */
  z-index: 1; /* Stay on top */
  top: 0; /* Stay at the top */
  left: 0;
  background-color: #111; /* 黑色 */
  overflow-x: hidden; /* 禁用水平滾動 */
  padding-top: 60px; /* 將內容放置在距頂部 60px 的位置 */
  transition: 0.5s; /* 0.5秒的過渡效果，用于側邊導航的滑動顯示 */
}
/* 導航菜單鏈接The navigation menu links */
.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}
/* 當您將鼠標懸停在導航鏈接上時，更改其顏色 */
.sidenav a:hover {
  color: #f1f1f1;
}
/* 關閉按鈕的位置和樣式（右上角） */
.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}
/* 設置頁面內容樣式 - 如果您希望在打開側邊導航時將頁面內容推向右側，請使用此設置。 */
#main {
  transition: margin-left .5s;
  padding: 20px;
}
/* 在高度小于 450px 的小屏幕上，更改側邊導航的樣式（減少內邊距和字體大小） */
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

第三步 - 添加 JavaScript：

下面的例子中，側邊導航將滑入，并且其寬度設置為 250px：

側邊導航覆蓋實例

/* 將側邊導航的寬度設置為 250px */
function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
}
/* 將側邊導航的寬度設置為 0 */
function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
}

親自試一試

下面的例子中，側邊導航將滑入，并將頁面內容向右推（用于設置側邊導航寬度的值也用于設置“頁面內容”的左外邊距）：

側邊導航推動內容

/* 設置側邊導航的寬度為 250px，頁面內容的左外邊距為 250px */
function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
}
/* 設置側邊導航的寬度為 0，頁面內容的左外邊距為 0 */
function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
  document.getElementById("main").style.marginLeft = "0";
}

親自試一試

下面的例子同樣會讓側邊導航滑入，并將頁面內容推向右側。不過這次，我們給 body 元素添加了一個 40% 不透明度的黑色背景色，以“突出”側邊導航。

帶有不透明度的側邊導航推動內容

/* 設置側邊導航的寬度為 250px，頁面內容的左外邊距為 250px，并給 body 添加黑色背景色 */
function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
  document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}
/* 設置側邊導航寬度為 0，頁面內容左外邊距為 0，body 背景色為白色 */
function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
  document.getElementById("main").style.marginLeft = "0";
  document.body.style.backgroundColor = "white";
}

親自試一試

在下面的例子中，側邊導航將從左側滑入，并覆蓋整個頁面（寬度為 100%）：

全寬的側邊導航：

/* 打開側邊導航 */
function openNav() {
  document.getElementById("mySidenav").style.width = "100%";
}
/* 關閉/隱藏側邊導航 */
function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
}

親自試一試

下面的例子在打開和關閉側邊導航菜單時不帶動畫效果。

沒有動畫的 Sidenav

/* 打開側邊導航 */
function openNav() {
  document.getElementById("mySidenav").style.display = "block";
}
/* 關閉/隱藏側邊導航 */
function closeNav() {
  document.getElementById("mySidenav").style.display = "none";
}

親自試一試

下面的例子展示了如何創建右側導航菜單：

右側導航：

.sidenav {
  right: 0;
}

親自試一試

下面的例子展示了如何創建一個始終顯示的側邊導航菜單（固定位置）：

始終顯示的側邊導航：

/* 側邊導航 */
.sidenav {
  height: 100%;
  width: 200px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  padding-top: 20px;
}
/* 頁面內容 */
.main {
  margin-left: 200px; /* 與側邊導航的寬度相同 */
}

親自試一試

相關頁面

教程：CSS 導航欄