使用 HTML、CSS 和 JavaScript 建立響應式導覽列

在當今的 Web 開發環境中，創建響應式且用戶友好的導覽列至關重要。本文逐步介紹了使用 HTML、CSS 和 JavaScript 設計響應式導覽列的過程。

概述
提供的程式碼示範如何建立適應不同螢幕尺寸的導覽列。導覽列包括適用於較大螢幕的標準頂部導覽和適用於較小螢幕的從左側滑入的側邊導航選單。這種方法可確保跨各種裝置的無縫用戶體驗。

HTML 結構
HTML 提供了網頁的基本結構。它包括：

包含網站標題和側邊導航切換按鈕的元素。
兩個元素：一個用於標題導航，另一個用於側面導航。
頁面主要內容的部分。
切換按鈕 (☰) 用於在較小螢幕上開啟和關閉側邊導航選單。

<header>
    <h1>My Website</h1>
    <button id="toggle-btn">☰</button>
    <nav id="header-nav">
        <!-- Navigation menu will be inserted here -->
    </nav>
</header>
<nav id="side-nav">
    <!-- Navigation menu will be inserted here -->
</nav>
<main>
    <h2>Welcome to My Website</h2>
    <p>This is the content of the page.</p>
</main>

CSS 樣式
CSS 樣式定義導覽元素的外觀和行為：

• 常規樣式：正文和標題具有字體、間距和版面的基本樣式。滾動行為：平滑；屬性確保平滑的滾動效果。
• 側邊導航：最初位於螢幕外，左側：-250px，當應用活動類別時，它會滑入視圖並具有過渡效果。寬度設定為 250px，覆蓋整個視窗高度。
• 響應式設計：媒體查詢根據螢幕尺寸調整導航元素的顯示。對於窄於 768 像素的螢幕，標題導航將隱藏，並顯示切換按鈕。相反，側面導航在較大的螢幕上是隱藏的。

nav#side-nav {
  background: #191d2b;
  width: 250px;
  height: 100vh;
  position: relative;
  top: 0;
  left: -250px;
  transform: translateX(0);
  transition: all .4s ease-out;
  z-index: 10;
}

nav#side-nav.active {
  left: 0;
}

@media (max-width: 768px) {
  header nav#header-nav {
    display: none;
  }

  header #toggle-btn {
    display: block;
  }
}

@media (min-width: 769px) {
  nav#side-nav {
    display: none;
  }
}

JavaScript 功能
JavaScript 用於將導航選單動態插入到標題和側面導航部分。該腳本還管理切換按鈕的功能，允許用戶顯示或隱藏側面導航選單。

const navMenu = `
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
`;

document.getElementById('header-nav').innerHTML = navMenu;
document.getElementById('side-nav').innerHTML = navMenu;

document.getElementById('toggle-btn').onclick = function() {
    let sideNav = document.getElementById('side-nav');
    sideNav.classList.toggle('active');
};

現場示範
您可以在此處查看響應式導覽列的即時演示：查看即時演示。

GitHub 儲存庫
有關完整的原始程式碼，包括 HTML、CSS 和 JavaScript 文件，請造訪 GitHub 儲存庫：響應式導覽列。

結論
這種創建響應式導覽列的方法為現代網頁設計提供了強大的解決方案。透過利用 HTML 進行結構、CSS 進行樣式設定以及 JavaScript 進行交互，開發人員可以確保為任何裝置上的使用者提供流暢且自適應的導航體驗。該程式碼可以成為更複雜的導航系統的基礎，適應各種專案的需求。

以上是使用 HTML、CSS 和 JavaScript 建立響應式導覽列的詳細內容。更多資訊請關注PHP中文網其他相關文章！