---
# System prepended metadata

title: 7. 響應式選單(1/2)
tags: [rwd]

---

---
tags: rwd
---
# 7. 響應式選單(1/2)
## 1.響應式選單常見樣式
### 一般選單(多欄多列式)

以手機版最小320px為例，選單一個大約是106px，選單裡的文字不超過106px。或所有文字內容寬度不超過320px [範例stuffandnonsense](https://stuffandnonsense.co.uk/)

![](https://i.imgur.com/cUU3DKz.jpg)

### 一列式設計
[範例skinnyties](http://skinnyties.com/)
![](https://i.imgur.com/qpa5RJC.png)

### 按下選單整個內容往下移
這種做法吃效能，建議改使用漢堡選單。[範例wellington](https://wellington.govt.nz/)

![](https://i.imgur.com/meemloq.png)

### 漢堡選單  (疊在內容上面)
[範例mopcon](http://www.mopcon.org/2014/)
![](https://i.imgur.com/g1j6IeZ.png)

### 按下後向左展開
[範例esquire](https://www.esquire.com/uk/)
![](https://i.imgur.com/EJ5ukyf.png)

### 折疊式
[範例bbc](https://www.bbc.com/news)
![](https://i.imgur.com/NTVbRX2.png)


### Off canvas 
[japantimes](http://www.japantimes.co.jp/)


