首頁 web前端 css教學 純CSS實現響應式導覽列的下拉式選單效果的實作步驟

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

Oct 19, 2023 am 08:42 AM
響應式導覽列 純css實現 下拉式選單效果

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

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

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

    <li>建立HTML結構
    首先,我們需要建立一個基本的HTML結構,包含導覽列的容器和導覽功能表。在導覽選單中,我們使用<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>
登入後複製
    <li>設定基本樣式
    接下來,我們需要為導覽列和選單項目設定一些基本的樣式。我們可以使用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;
}
登入後複製
    <li>定義點擊下拉選單的行為
    透過CSS偽類:hover我們可以實現在滑鼠懸停在選單項目上時顯示下拉式選單的效果。而在行動裝置上,我們可以用JavaScript新增一個點擊事件來切換下拉式選單的顯示與隱藏。
.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');
  });
});
登入後複製
    <li>響應式設計
    為了適應各種螢幕尺寸,我們需要在不同的視窗寬度下,針對導覽列的佈局進行調整。下面是針對行動裝置的視窗寬度小於768px的樣式範例,把選單項目隱藏起來並使用按鈕來開啟或關閉選單。
@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中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

VUE 3 VUE 3 Apr 02, 2025 pm 06:32 PM

它的出局!恭喜Vue團隊完成了完成,我知道這是一項巨大的努力,而且很長時間。所有新文檔也是如此。

您可以從瀏覽器獲得有效的CSS屬性值嗎? 您可以從瀏覽器獲得有效的CSS屬性值嗎? Apr 02, 2025 pm 06:17 PM

我有人寫了這個非常合法的問題。 Lea只是在博客上介紹瞭如何從瀏覽器中獲得有效的CSS屬性。那樣的是這樣。

帶有粘性定位的堆疊卡和一點點的雜物 帶有粘性定位的堆疊卡和一點點的雜物 Apr 03, 2025 am 10:30 AM

前幾天,我發現了科里·金尼文(Corey Ginnivan)網站上的這一點,當您滾動時,彼此之間的卡片堆放集。

在CI/CD上有點 在CI/CD上有點 Apr 02, 2025 pm 06:21 PM

我說的“網站”比“移動應用程序”更合適,但我喜歡Max Lynch的框架:

比較瀏覽器的響應式設計 比較瀏覽器的響應式設計 Apr 02, 2025 pm 06:25 PM

這些桌面應用程序中有許多目標是同時在不同的維度上顯示您的網站。因此,例如,您可以寫作

在WordPress塊編輯器中使用Markdown和本地化 在WordPress塊編輯器中使用Markdown和本地化 Apr 02, 2025 am 04:27 AM

如果我們需要直接在WordPress編輯器中向用戶顯示文檔,那麼最佳方法是什麼?

為什麼Flex佈局中的紫色斜線區域會被誤認為是'溢出空間”? 為什麼Flex佈局中的紫色斜線區域會被誤認為是'溢出空間”? Apr 05, 2025 pm 05:51 PM

關於Flex佈局中紫色斜線區域的疑問在使用Flex佈局時,你可能會遇到一些令人困惑的現象,比如在開發者工具(d...

如何通過CSS選擇第一個類名為item的子元素? 如何通過CSS選擇第一個類名為item的子元素? Apr 05, 2025 pm 11:24 PM

在元素個數不固定的情況下如何通過CSS選擇第一個指定類名的子元素在處理HTML結構時,常常會遇到元素個數不�...

See all articles