純CSS實現響應式導覽列的下拉式選單效果的實作步驟-css教學-PHP中文網

純CSS實現響應式導覽列的下拉式選單效果的實作步驟

WBOY

發布： 2023-10-19 08:42:26

原創

1386 人瀏覽過

純CSS實現響應式導覽列的下拉式選單效果的實作步驟

純CSS實現響應式導覽列的下拉式選單效果的實現步驟

#現今，隨著行動裝置的普及，響應式設計已成為網頁設計的一個重要因素。在網頁的導覽列設計中，為了提供更好的使用者體驗，通常需要使用下拉式選單來呈現更多的導覽選項。本文將介紹如何使用純CSS來實現響應式導覽列的下拉式選單效果，並附有具體的程式碼範例。

<ul></ul>

<li>

<ul></ul>

<li>

<nav class="navbar">
  <ul class="nav-menu">
    <li class="nav-item">首页</li>
    <li class="nav-item with-dropdown">
      产品
      <ul class="dropdown">
        <li class="dropdown-item">产品1</li>
        <li class="dropdown-item">产品2</li>
        <li class="dropdown-item">产品3</li>
      </ul>
    </li>
    <li class="nav-item">关于我们</li>
    <li class="nav-item">联系我们</li>
  </ul>
</nav>

登入後複製

flexbox

.navbar {
  background-color: #f8f8f8;
  padding: 10px;
}

.nav-menu {
  display: flex;
  justify-content: space-between;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-item {
  padding: 10px;
}

.with-dropdown {
  position: relative;
}

.dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: white;
  padding: 10px;
}

.dropdown-item {
  padding: 10px;
}

登入後複製

:hover

.with-dropdown:hover .dropdown {
  display: block;
}

登入後複製

var dropdowns = document.querySelectorAll('.with-dropdown');
dropdowns.forEach(function (dropdown) {
  dropdown.addEventListener('click', function () {
    this.classList.toggle('active');
    var dropdownMenu = this.querySelector('.dropdown');
    dropdownMenu.classList.toggle('open');
  });
});

登入後複製

@media screen and (max-width: 768px) {
  .nav-menu {
    flex-direction: column;
    align-items: stretch;
  }

  .nav-item {
    display: none;
    padding: 10px;
  }

  .navbar.open .nav-item {
    display: block;
  }

  .navbar-button {
    display: block;
    background-color: #f8f8f8;
    border: none;
    padding: 10px;
    cursor: pointer;
  }
}

登入後複製

<nav class="navbar">
  <button class="navbar-button">菜单</button>

  <ul class="nav-menu">
    <li class="nav-item">首页</li>
    <li class="nav-item with-dropdown">
      产品
      <ul class="dropdown">
        <li class="dropdown-item">产品1</li>
        <li class="dropdown-item">产品2</li>
        <li class="dropdown-item">产品3</li>
      </ul>
    </li>
    <li class="nav-item">关于我们</li>
    <li class="nav-item">联系我们</li>
  </ul>
</nav>

登入後複製

透過上述的步驟，我們成功地實現了純CSS的響應式導覽列的下拉式選單效果。當螢幕寬度較小時，選單項目會自動隱藏，透過按鈕來開啟或關閉選單。當滑鼠懸停在具有下拉式選單的選單項目上時，下拉式選單會自動顯示。這種實作方式簡潔高效，不依賴JavaScript，適用於各種網頁專案中。希望本文對你有幫助！

以上是純CSS實現響應式導覽列的下拉式選單效果的實作步驟的詳細內容。更多資訊請關注PHP中文網其他相關文章！