0%

[RWD] 響應式網頁 - 固定式選單及 off-canvas 選單

發表於 更新於 分類於 Disqus：

本篇文章接續上一篇，繼續記錄 RWD 的常用選單語法結構，包含固定式選單及側邊展開（off-canvas）選單等兩種。

固定式選單

讓使用者在滑動頁面時，表頭永遠在螢幕上方。
使用 position: fixed，但要注意頁面內容會被表頭遮住，所以內容區塊要用 padding-top 空出表頭的高度，才不會被遮住部分內容。

注意事項：

  • position: fixed 在安卓部分舊型手機上不適用，若能用 JS 做兼容是較好的做法。
  • 要考慮到表頭是否會佔螢幕太多版面，會的話就不要用 fixed。

語法：

1
2
3
4
5
6
7
8
@media(max-width: 767px){
  .header{
    position: fixed;
    width: 100%;
    background: black; }
  .content{
    padding-top: 81px; }
}

off canvas 選單設計

適合用於選項超多的選單，PC 版（放較少選項）跟手機版（放較多選項）可以各一套選單設計。

說明：

請搭配 範例程式碼 一同閱讀。

  • 結構：.container 底下有 .aside（會滑出來的選單）跟 .main（底下有 .header）
  • 預期效果：點了表頭中的 a 連結按鈕（.mobile-link）就會讓 body 動態加入 .open，之後 .aside 選單從左側滑出來，點 .aside 中的 a 連結按鈕（.mobile-close）又滑回去。

語法：

CSS：

  1. .aside 設定絕對定位
    用 transform ( 或 margin ) 設定 X 軸位移的距離 (=寬度)
    註：transform 在網頁上的效能比 padding、margin 都好
    1
    2
    3
    4
    5
    6
    7
    8
    9
    .aside{
      position: absolute;
      top: 0;
      bottom: 0;
      width: 270px;
      height: 100%;;
      overflow: hidden;
      transform: translateX(-270px);
    }
  2. 核心程式碼
    1
    2
    3
    4
    5
    6
    7
    8
    .open .main{
      transform: translateX(270px);
      // 點了 .header 會讓 .menu 往右推 270 px 以容納滑出來的選單
    }
    .open .aside{
      transform: translateX(0px);
      // 點了 .header 會讓選單滑入視窗中
    }
  3. 選單滑入的動畫效果 — transition，可以有影格效果
    1
    2
    3
    4
    .main{
      ...
      transition: 0.3s ease;
    }

jQ：

1
2
3
4
5
6
$('.mobile-link').click(function(event) {
  $('body').addClass('open');
});
$('.mobile-close').click(function(event) {
  $('body').removeClass('open');
});

好啦，響應式的選單設計就先介紹四種，雖然選單不是響應式設計的全部，但應該算是蠻核心的部分了，其他眉眉角角就等我之後有時間精力再來補寫囉（癱）。