使用滑動側導航選單建立響應式設計

在本教學中，您將使用 JavaScript 和 CSS 建立可擴展的側面導覽功能表。最終產品如下圖所示：

1. 建立標記

首先，讓我們為側邊選單添加一些標記：

<div id="sideNavigation" class="sidenav">
  <a href="#" class="close-btn">&times;</a>
  <a href="#">About</a>
  <a href="#">Features</a>
  <a href="#">Contact Us</a>
</div>
 
<nav class="topnav">
  <a href="#" class="ham-icon">
    <svg width="30" height="30" id="icoOpen">
        <path d="M0,5 30,5" stroke="#000" stroke-width="5"/>
        <path d="M0,14 30,14" stroke="#000" stroke-width="5"/>
        <path d="M0,23 30,23" stroke="#000" stroke-width="5"/>
    </svg>
  </a>
</nav>
 
<section id="main">
  <h1 id="This-Side-Navigation-Menu-Looks-Good">This Side Navigation Menu Looks Good!</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>

在這裡你可以看到我們使用sidenav類別建立了一個側邊選單div。接下來，我們透過 <nav></nav> 標籤添加了實際的頂部欄導航，並且我們使用 SVG 作為側面選單圖示。

請記得將網站的所有內容放入 div id="main" 容器中，以便它向右滑動。

2. 寫 JavaScript 程式碼

接下來，讓我們新增 JavaScript，該 JavaScript 將使用 ham-icon 類別偵聽漢堡包圖示上的點擊事件，以及側邊導航選單滑到螢幕上後出現的關閉按鈕。

document.querySelector("a.ham-icon").addEventListener("click", function(event){
  document.getElementById("sideNavigation").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
});

document.querySelector("a.close-btn").addEventListener("click", function(event){
  document.getElementById("sideNavigation").style.width = "0";
  document.getElementById("main").style.marginLeft = "0";
});

點擊漢堡包圖示應該會顯示側面導航。我們透過將導航的寬度設為 250px 並同時向主網站內容新增 250px 的左邊距來實現此目的。

點擊關閉按鈕應該會隱藏側邊導航。為此，我們將導航的寬度變更回 0，同時將主網站內容的左邊距設為 0。

3. 使用 CSS 樣式

最後，我們需要使用一些 CSS 來設定側邊選單和連結的頁面樣式。 CSS 會將所有網頁元素正確地放置在我們想要的位置。我們也會在 transition 屬性的幫助下應用一些簡單的動畫。讓我們一次看一下 CSS 的一部分。

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  padding-top: 4rem;
  transition: 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28);
  font-family: "Bebas Neue";
}

.sidenav a {
  padding: 0.5rem 1rem;
  text-decoration: none;
  color: #bdbdbd;
  display: block;
  transition: 0.4s;
  white-space: nowrap;
  font-size: 2rem;
}

.sidenav a:hover {
  color: white;
  background: #9e9e9e;
}

我們將側邊導航的height設定為100%，並將其初始width設為0以使其隱藏。但是，只有當 overflow-x 屬性的值設定為 hidden 時，側邊導航的內容才會保持隱藏。

過渡屬性可確保側邊導航寬度的變化不會突然發生，並且緩動功能使其具有一點彈性。

對於側面導航內的鏈接，我們將 white-space 屬性的值設為 nowrap，以便選單文字不會溢出多行。

.sidenav .close-btn {
  position: absolute;
  top: -1rem;
  right: 1rem;
  font-size: 5rem;
}

.sidenav .close-btn:hover {
  background: initial;
  transform: scale(1.2);
}

上面的 CSS 樣式將我們的關閉按鈕與側面導航中的其他連結分開。我們對關閉按鈕應用了絕對定位，並防止其背景在懸停時變成淺灰色。當使用者將滑鼠懸停在其上方時，它的大小也會放大 20%。

現在，以下 CSS 將透過使用相同的過渡持續時間和相同的緩動函數來確保主要內容位置的移動與導覽選單同步。將 overflow-x 屬性的值設為 hidden 可確保不會因內容移動而出現水平捲軸。

#main {
  transition: margin-left 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28);
  padding: 20px;
  width: 100%;
}

body {
 overflow-x: hidden; 
}

我們也可以使用以下 CSS 為漢堡圖示添加一點旋轉運動。它在 0.5 秒的時間內將漢堡包圖示旋轉 180 度。

a svg {
  transition: all 0.5s ease;
}
a svg:hover {
  transform: rotate(180deg);
}

最後，讓我們透過使用以下 CSS 調整連結的間距和大小來使導航選單具有響應能力。它確保選單不會在垂直空間較小的螢幕上超出範圍。

@media screen and (max-height: 480px) {
  .sidenav {
    padding-top: 3rem;
  }
  .sidenav a {
    font-size: 1.5rem;
  }
}

此時您的導覽選單應該類似於以下 CodePen 演示。

4. 移除投影片

要讓選單顯示時沒有幻燈片動畫，只需更改 CSS 屬性 transition，如下面的縮寫形式所示：

.sidenav {
    transition: 0s; 
}

#main {
    transition: margin-left 0s;
}

這將使變更立即出現，因為 transition 中沒有指定延遲。我們使用的預設值是 0.5s。

結論

建立側邊選單只需要幾行程式碼，不需要使用很多資源。使程式碼能夠響應不同的設備螢幕分辨率，只需透過針對特定情況添加媒體查詢來修改 CSS。

為了更進一步，您可能會想要使用 Bootstrap 或 Bulma 等 CSS 框架來設計選單樣式。

本文已根據 Monty Shokeen 的貢獻進行了更新。 Monty 是一位全端開發人員，他也喜歡編寫教學課程和學習新的 JavaScript 函式庫。

以上是使用滑動側導航選單建立響應式設計的詳細內容。更多資訊請關注PHP中文網其他相關文章！