---
tags: rwd
---
# 7. 響應式選單(2/2)
## 2.多欄多列式設計細節
[範例檔](https://codepen.io/tinchen/pen/powQYxZ)
* 以iphone5se 320px為例(目前最小值)，選單的字體16px 最多可以放四個字
* 選單不做奇數 或 手機板隱藏某一個選單、或排成一排
* 專案時間PC web layout 1-2天、RWD web layout 3-7天
* 範例手機版 .menu li 設定寬度width:33.333%


## 3.漢堡選單設計

[範例檔menu-Hamburger](https://codepen.io/tinchen/pen/ExXGOJJ)
(1) 漢堡選單按鈕: 在ul同層加上a按鈕.showmenu，PC上隱藏767px時打開

<ul><li></li></ul>
<a href="#" class="showmenu">menu</a>

/*在PC上隱藏漢堡選單按鈕*/
.showmenu{
  display: none;
}

  @media (max-width: 767px){
  .showmenu{
    display: block;
    float: right;
    margin: 1em;
  }
 }

(2) ul.menu選單: .menu
* **隱藏選單:** 在767px時先設定0px超出範圍隱藏
max-height: 0px;
overflow: hidden;

* **重疊內容**:
* 將menu選單定位在header，並讓選單在最上層
position: absolute;
z-index: 100;
background: #0F222B;

* 依照header的區塊高度去蓋掉content內容，因選單從按鈕下方出現，header區塊高度為80+border線=81，所以menu區塊top也要寫 81px
top: 81px;

* 因為定位absolut，若希望寬度滿版就要寫left0跟right0讓寬度變100%
left: 0;
right: 0;

* **jq效果**: 按下menu按鈕後，動態在body加上class為.menu-show，並找到.menu show裡的.menu高度變成500px

    /*jQ點擊後動態在 body 加上 class */
      .menu-show .menu{
        max-height: 500px
    }

* **縮放動畫 漸變**:
transition: max-height 2.3s;

* **漢堡選單收合**:
https://codepen.io/TzuHui/pen/WNQRjXd

## 4.固定式選單 (Fixed)
[範例fixed](https://codepen.io/tinchen/pen/NWgmPeX)

* 在header設定
position:fixed;
width: 100%;
background: #fff;

* 往上滑content內容會被fixed遮住一部分，所以要推81px或更多

## 5.Off Canvas 選單設計
[範例off canvas](https://codepen.io/tinchen/pen/rNwbpgP)
手機版按下menu選單往左展開

* 範例.aside 使用絕對定位+位移transform:-270px，並將多餘的隱藏overflow:hidden (範例沒有使用display:none)
* container也要加上overflow:hidden;
* 利用按鈕觸發事件跟漢堡選單一樣

## 選單總結
在codepen搜尋”responsive menu”或”offcanvas menu”找相關參考