CSS RWD 選單設計的要點

更新日期： 2024 年 11 月 5 日

在響應式網頁設計（Responsive Web Design, RWD）中，選單的設計是關鍵之一。

透過 CSS 和媒體查詢，可以讓選單在不同螢幕尺寸下自動調整顯示方式，讓使用者在各種裝置上都能輕鬆使用選單。

本文將介紹這個 RWD 選單的代碼結構、設計要點以及其運作原理。

HTML 結構說明

這個選單的 HTML 結構簡潔且層次分明，具備主選單和子選單的設定：

• .ham：為響應式選單的「漢堡圖示」，在手機或平板顯示時出現。
• .logo：顯示網站的 LOGO。
• .menu：包含所有選單項目的主容器。
• .menu_list：每個主選單項目的列表。
• .submenu：內部的子選單，用於顯示次級選單項目。

HTML 結構範例

<header>
    <div class="ham">X</div>
    <div class="logo">LOGO</div>
    <ul class="menu">
        <li class="menu_list">menu</li>
        <li class="menu_list">menu</li>
        <li class="menu_list">
            menu*
            <ul class="submenu">
                <li class="submenu_list">submenu</li>
                <li class="submenu_list">submenu</li>
                <li class="submenu_list">submenu</li>
            </ul>
        </li>
        <li class="menu_list">menu</li>
    </ul>
</header>

CSS 設計要點

基本樣式設定

在這段代碼中，header 是選單的容器，內部包含 LOGO、選單和漢堡圖示。

justify-content: space-between; 將 LOGO 和選單置於兩端，而 .menu 使用 display: flex; 將選單項目水平排列。

header {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  background: #eee;
}

.menu {
  display: flex;
}

.menu_list {
  line-height: 50px;
  padding: 0 10px;
}

子選單樣式

子選單 .submenu 設定為 position: absolute;，當使用者將滑鼠懸停於主選單項目 .menu_list 時，子選單會顯示出來。

這樣設計讓子選單的顯示不佔用主選單空間，且更具互動性。

.submenu {
  position: absolute;
  left: 0;
  display: none;
}

.menu_list:hover .submenu {
  display: block;
}

響應式樣式設定

響應式設計的重點，在於當螢幕寬度縮小到 768px 以下時，讓選單變成垂直顯示，並顯示漢堡圖示。

以下是各個響應式樣式的細節：

顯示漢堡圖示

當螢幕寬度小於 768px 時，將 .ham 的 display 屬性設為 block，以顯示漢堡圖示，同時將 LOGO、選單和漢堡圖示佈局設置為水平排列。

@media screen and (max-width: 768px) {
  .ham {
    display: block;
    line-height: 50px;
    background: pink;
    padding: 0 10px;
  }
}

調整選單為垂直排列

使用 .menu 的 flex-direction: column; 讓選單垂直排列。

這樣在手機或小螢幕上，選單會更易於瀏覽。

且在這段樣式中，選單設為絕對定位並從 LOGO 下方開始顯示。

.menu {
  position: absolute;
  top: 70px;
  left: 0;
  flex-direction: column;
}

.menu_list {
  display: block;
  width: 300px;
  background: orange;
}

子選單顯示與主選單對齊

在小螢幕上，子選單 .submenu 使用 position: relative; 並設置 display: block;

讓子選單內部的項目按順序顯示在主選單下方，使選單更易於瀏覽。

.submenu {
  display: block;
  position: relative;
}

小結：RWD 選單設計要點

這個 RWD 選單設計包含了不同螢幕寬度下的樣式調整，使頁面在多裝置上都能顯示最佳效果。這些要點可以歸納為：

1. 使用媒體查詢：根據螢幕寬度調整選單的顯示方式。
2. 漢堡圖示：在小螢幕上顯示漢堡圖示，使選單更簡潔。
3. 垂直選單排列：在手機或平板等小螢幕裝置上，選單改為垂直排列，使每個項目更易於點擊。
4. 子選單顯示方式調整：小螢幕上子選單會隨主選單顯示在下方，使操作體驗更加友善。

透過以上的 RWD 技術，這個選單能夠隨裝置自適應地調整顯示方式，提升使用者在多裝置上的瀏覽體驗。