利用CSS實現響應式導航選單

利用CSS實現響應式導航選單

隨著行動裝置的普及，越來越多的網站需要適應不同尺寸的螢幕來提供更好的用戶體驗。在行動裝置上，由於螢幕空間有限，傳統的水平導航選單可能會在小螢幕上顯示不全或導致用戶需要不斷滑動螢幕來查看完整的選單項目。因此，響應式導航選單越來越受歡迎。

本文將介紹如何利用CSS來實作一個簡單的響應式導覽選單，並提供具體的程式碼範例。

首先，在HTML檔案中建立一個基本的導覽選單結構。以下是一個簡單的範例：

<nav class="navbar">
  <a href="#" class="navbar-brand">Logo</a>
  <ul class="navbar-menu">
    <li class="menu-item"><a href="#">Home</a></li>
    <li class="menu-item"><a href="#">About</a></li>
    <li class="menu-item"><a href="#">Products</a></li>
    <li class="menu-item"><a href="#">Contact</a></li>
  </ul>
</nav>

在CSS檔案中，我們需要新增一些樣式來將導覽選單變成響應式。

首先，為導航選單添加基本的樣式，使其看起來像一個水平的導航列：

.navbar {
  background-color: #333;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
}

.navbar-brand {
  color: #fff;
  font-size: 20px;
  text-decoration: none;
}

.navbar-menu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu-item {
  margin-left: 10px;
}

.menu-item a {
  color: #fff;
  text-decoration: none;
}

然後，我們需要為小螢幕尺寸添加響應式樣式。

在小螢幕上，我們希望導航選單變成一個垂直的下拉式選單。我們可以使用CSS的媒體查詢來達到這個效果。

@media (max-width: 600px) {
  .navbar-menu {
    display: none;
  }

  .menu-item {
    display: block;
    margin: 10px 0;
  }

  .menu-item a {
    display: block;
    padding: 10px;
    background-color: #333;
  }

  .navbar-toggle {
    display: block;
    color: #fff;
    font-size: 20px;
    text-decoration: none;
    cursor: pointer;
  }

  .navbar-collapse {
    display: none;
    background-color: #333;
    padding: 10px;
  }

  .navbar-collapse.active {
    display: block;
  }
}

以上程式碼中， @media (max-width: 600px) 表示當螢幕寬度小於等於 600px 時套用這些樣式。

我們將隱藏原始的導覽選單.navbar-menu，並將每個選單項目.menu-item 顯示為區塊級元素，並新增一些樣式以使其看起來像一個下拉式選單。

另外，我們也加入了一個 .navbar-toggle 元素作為觸發選單的按鈕，並建立了一個 .navbar-collapse 元素來容納下拉式選單。透過給 .navbar-collapse 添加 .active 類，我們可以控制它的顯示和隱藏。

最後，在JavaScript中加入一些互動效果。我們將使用簡單的事件處理函數來切換 .navbar-collapse 的顯示和隱藏。

document.querySelector('.navbar-toggle').addEventListener('click', function() {
  document.querySelector('.navbar-collapse').classList.toggle('active');
});

現在，當點擊 .navbar-toggle 時，我們可以切換 .navbar-collapse 的顯示和隱藏。

以上就是用CSS實作響應式導航選單的基本步驟和範例程式碼。你可以將這些範例程式碼應用到你自己的網站中，並根據實際需要進行調整和擴展。希望這篇文章對你有幫助！

以上是利用CSS實現響應式導航選單的詳細內容。更多資訊請關注PHP中文網其他相關文章！