[學習筆記] RWD網頁設計07— 常見響應式設計選單

響應式選單常見樣式

響應式網頁的選單該怎麼設計呢? 手機版在解析度有限的情況下，選單比較難像在電腦版一樣呈現在一列，而通常有幾種較常見的作法，如下 :

一、電腦版呈現選單呈現一列，手機版縮為兩列或兩欄呈現，其中手機版有以下幾點需要注意 :

• 須注意字數不得以超過目前市面上手機的最小解析度。 ( 2020 更新 : 可以抓 iPhone5 的 320px )
• 通常不會放奇數型的選單。
• 選單內容建議二至四個字較佳。( 以預設字體大小 16px 來評估 )

二、在手機版設計漢堡選單。

• 使用者點選漢堡選單後再展開，並且透過覆蓋的方式呈現，可以是下拉式選單或由左而右展開的方式。
• 建議不要展開選單後，會推移整個網頁內容的設計方式，這樣對網頁效能是比較不好的。

在手機版通常會設計漢堡選單，如黃色框框區塊 ( 取自 BBC )

使用者點選漢堡選單後，展開下拉式選單 ( 取自 BBC )

如何設計漢堡選單

PC 設定

• 建立列表 ul，並命名 class 為 .menu ( 單列式呈現 )
• 設計一個 a 連結作為漢堡選單按鈕，class 可命名為 .show-menu ，並先設定 display: none; ( 電腦版不顯示 )

Mobile 設定，以 max-width: 767px; ( ipad 直式以下 ) 為例

1. 將列表先隱藏起來，設定 max-height: 0px; 且 overflow: hidden;
2. 接下來要顯示列表，首先是列表的設定 :

• 設定絕對定位 position: absolute;，並根據 header 所佔的高度設定 top 值，將列表推移到表頭下方
• 設定 left: 0;、right:0;，使列表呈現滿版的感覺，或是設定 width: 100%

再來是漢堡選單的設定 :

• 透過 jQuery 語法 toggleClass，在 body 動態新增 class 名稱 .menu-show

當連結被點擊後，透過 toggleClass 動態切換 class 名稱

• 在 CSS 透過 Class .menu-show .menu 選取到選單，並設定 max-width 撐開其高度
• 在選單 .menu 設定 transition: max-heigth _s; ，透過 CSS 動畫產生漸漸展開選單的效果。( 這邊不使用 jQuery 來操控是因為 jQuery 透過控制高度來展開，在效能上是比較差的。)

固定式選單設計 ( Fixed )

我們常常看到有些選單在滑動內容時，選單一直固定在最上方，要怎麼做到這樣呢? 其實做法很簡單，我們只要設定 position: fixed; 且 width: 100%，表頭就會固定在網頁最上方，如下圖

而固定的選單會覆蓋到內容，這時候只要對內容的區塊去設定 paddind-top，推移和選單一樣的高度，即可以解決此問題。

雖然設定表頭固定可以讓使用者隨時可以點選到表單，但如果表頭高度太高，佔了手機畫面太多空間，這是後要不要 fixed 可能就需要再評估一下囉!

RWD 漢堡選單 ( 固定式選單) demo

OffCanvas 選單設計 ( 左側隱藏式選單 )

這種選單通常會有針對電腦版設計一種選單，而在手機版的選單一開始是被隱藏的，透過點選漢堡選單或按鈕才會展開，設計要點為 :

1. 外層容器置中，設置 max-width 使其自適應寬度，且設置 overflow: hidden; ( 這是為了搭配 2. 的 transform 推移 )
2. 左側選單設定絕對定位，並且使用 transform: translateX(負值)，使左側選單整個往左推移。( 這邊不使用 left 或 margin 推移是因為 transform 的效能相對來說比較好 ) ( transform 為 CSS3 的語法 )
3. 漢堡選單或展開左側選單按鈕，在電腦版的時候是 display: none; 不顯示
4. 透過 jQuery 動態在 body 新增 class，即可選取到指定區塊並設定 transform 使其推移，可以搭配 transition做動畫效果

RWD 左側隱藏式選單 demo