製作滑動側導航菜單以進行響應式設計

本教程向您展示瞭如何使用JavaScript和CSS構建響應式響應的可擴展側導航菜單。 最終結果是一個時尚，現代的菜單。

這是一個現場演示：

1。 HTML結構：

從添加側面菜單的HTML開始：

這將設置側面菜單（

<div class="sidenav" id="sideNavigation">
  <a class="close-btn" href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">×</a>
  <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">About</a>
  <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Features</a>
  <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Contact Us</a>
</div>

<nav class="topnav">
  <a class="ham-icon" href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">
    <svg height="30" id="icoOpen" width="30">
      <path d="M0,5 30,5" stroke="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b000" stroke-width="5"></path>
      <path d="M0,14 30,14" stroke="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b000" stroke-width="5"></path>
      <path d="M0,23 30,23" stroke="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b000" stroke-width="5"></path>
    </svg>
  </a>
</nav>

<main id="main">
  <h1>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>
</main>

），漢堡圖標（

）以打開它，一個關閉按鈕（sidenav）和主內容區域（ham-icon>）。 close-btnmain 2。 JavaScript功能：

此JavaScript處理菜單的打開和關閉操作：>

>單擊漢堡圖標展開菜單；單擊“關閉”按鈕崩潰了。

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";
});

3。 CSS樣式：

> CSS樣式菜單及其動畫：

>此CSS提供了平滑的幻燈片動畫，處理溢出，並為較小的屏幕增加了響應能力。 身體上的

可防止水平滾動。

https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bmain {
  transition: margin-left 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28);
  padding: 20px;
  width: 100%;
}

body {
  overflow-x: hidden;
}

a svg {
  transition: all 0.5s ease;
}

a svg:hover {
  transform: rotate(180deg);
}

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

4。刪除幻燈片動畫（可選）：overflow-x: hidden;

>

要刪除幻燈片動畫，將的屬性設置為> ：

transition這使菜單出現並立即消失。 0s

結論：

.sidenav {
  transition: 0s;
}

https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bmain {
  transition: margin-left 0s;
}

這個簡單而有效的側面導航菜單很容易自定義，並且可以適應各種設計需求。 考慮使用Bootstrap或Bulma等CSS框架以獲取更高級的樣式選項。 感謝Monty Shokeen的貢獻！

以上是製作滑動側導航菜單以進行響應式設計的詳細內容。更多資訊請關注PHP中文網其他相關文章！