0%

[RWD] 響應式網頁 - 多欄多列選單及漢堡選單

發表於 更新於 分類於 Disqus：

本篇文章將記錄 RWD 的常用選單語法結構，包含多行多列選單及漢堡選單等兩種。

多欄多列選單排版法：以 3*2 為例

語法：

HTML：

<ul><li> 結構，<li> 需要 6 個

CSS：

1
2
3
4
5
float: right;  // PC版排版
@media ( max-width: 767px){
  float: none;  // 自然排列，這是 RWD 的精髓
  width: 33.33333 % ;
}

漢堡選單排版法

請搭配 範例程式碼 一同觀看。

漢堡選單是怎麼出現的

在寫 PC 版時，就預先寫好了漢堡選單的按鈕（<a>.showmenu），只是用 display: none 先隱藏起來；漢堡選單裡的選項跟 PC 版其實是同一套，只是把 float 拿掉而已。

PC 版選單怎麼變成漢堡選單的

CSS：

以下都是寫在 @media (max-width: 767px) 的大括號裡，在相對應的裝置才會觸發，1~3 都是 .menu 的樣式。

  1. 隱藏選單（關鍵語法）（之後會用 jQ 動態加入 class，就會展開）
    1
    2
    max-height: 0px;
    overflow: hidden;
  2. 絕對定位疊在網頁上
    1
    2
    3
    4
    5
    position: absolute;
    z-index: 100; // 權重
    top: 81px; // 因為 header 80 px + border 1 px，若漢堡選單要從 header 下方展開就要這樣設
    left: 0; // 在絕對定位之下要做出滿版效果，左右都要0
    right: 0;
  3. 選單展開的漸變效果
    1
    transition: max-height 2.3s;
  4. 取消隱藏漢堡選單的按鈕
    1
    2
    3
    4
    5
    .showmenu{
      display: block;
      float: right;
      margin: 1 em;
    }
  5. 配合 jQ 指令的 CSS 語法：點擊後，動態在 body 加上 class
    1
    2
    3
    .menu-show .menu{
      max-height: 500px; // 選單的高度，原本是設成 0 px
    }

    jQ：

    點擊漢堡按鈕（.showmenu） 後，取消預設連結功能，動態在 body 加上 class（.menu-show）。
    1
    2
    3
    4
    $('.showmenu').on('click', function(e){
      e.preventDefault();
      $('body').toggleClass('menu-show');
    });
    body 加上 .menu-show 之後，body 中的 .menu 才會被觸發，否則按了也不會展開。

.menu-show 為何是加在 body 上

如果 jQ 是在 .menu 上動態加上 class 會怎麼樣呢？

其實要在哪裡動態加上 class，需要看網頁的樣式怎麼設計。像是有些設計可能不只影響 .menu，還會加上其他的效果，那就必須要加在 body 上。
若只有增加彈出選單的效果，那 .menu-show 其實不一定要在 body 上， 加在 .header 、加在 .menu 都可以。