--- 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/)