JS-用 JQuery 來做 RWD Menu 吧！

我們在網頁最常用的是什麼？就是 header 中的 menu 呀🙆‍♂️🙆‍♂️🙆‍♂️

那這週我來把解釋如何使用 Jquery 做具有 RWD 效果的 Menu 吧～

首先做了一個範例網頁，menu 有 5 個按鈕配對到下面 5 個 section ，如下：

下方是這個 menu 的 HTML ，我們使用<ul> 包 menu ，而漢堡選單另外做用 <a>成一個按鈕。

<header>
  <h1 class="logo">LOGO</h1>
  <ul class="header__nav">
    <li class="nav__item"><a href="#" title="1">section</a></li>
    <li class="nav__item"><a href="#" title="2">section2</a></li>
    <li class="nav__item"><a href="#" title="3">section3</a></li>
    <li class="nav__item"><a href="#" title="4">section4</a></li>
    <li class="nav__item"><a href="#" title="5">section5</a></li>
  </ul>
  <a class="hamBar" href="#"><i class="fas fa-bars"></i></a>
</header>

而 CSS 部分則是主要使用 flex 排版，方便去做到時候的方向轉換唷～

header {
  background-color:#EEEEEE;
  padding:12px 12px;
  //往下滾要固定，所以fixed
  position: fixed;
  top: 0;
  //左右靠邊滿版
  right: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
}
.header__nav {
  display: flex;
  justify-content: center;
  align-items: center;
  .nav__item {
    color: #fffdfe;
    padding:0 12px;
    border-radius: 4px;
    text-align: center;
    a{
      //按鈕做出高度可以用line-height文字垂直置中
      line-height: 44px;
    }
  }

在 RWD 轉換到平板或手機的寬度時，因為寬度不夠顯示完整的 menu，我們都會用漢堡選單來收。

而在電腦版本時，漢堡選單的 icon 會display: none暫時隱藏。

.hamBar{
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
}

先來看看 RWD 之後選單的樣子吧🤩🤩

究竟如何做到，就讓我們來用 css 的 @media all and (max-width: 768px) {...} 來做看看吧～

步驟是：

1. 把 menu 先轉成絕對定位，並且定位在header下方。
2. 改變 flex 的方向 flex-direction : column 。
3. 先 display : none 把它隱藏，等到需要再叫出來。
4. 記得把漢堡選單的 icon 顯示出來！

@media all and (max-width: 768px) {  
.header__nav{
    display: none;
    //改變成絕對定位
    position: absolute;
    bottom:0;
    left: 0;
    right: 0;
    //menu轉成直的
    flex-direction: column;
    transform:translateY(100%);
    background-color: #fff;
    .nav__item{
      width: 100%;
      border-bottom:  1px solid #cccccc;
    }
  }
  .hamBar{
    display: flex;
  }
}

這時候如何觸動選單展開呢？

可以使用以下幾個方法（本次先來說明 1 和 2 ）

1. 直接用 Jquery 的 slideToggle()→目前上面的css就是以這個方法為主，方便快速。
2. 用 Jquery 的 toggleClass 增加css去改寫 menu 高度。
3. 用原生 JavaScript ，監測 menu 高度在改變高度。

.slideToggle()

我們先使用簡單的方法 1 來做範例：首先開始寫前記得要加上 $(document).ready(() => {} ，然後在 { } 中才寫程式，確保 HTML log 完。

$(document).ready(() => {
$('.hamBar').click(function(){
    event.preventDefault();
    $('.header__nav').slideToggle(600);
 });
}

我們一步一步解釋：

1. $('.hamBar') 先抓取到 HTML 上的漢堡選單 icon
2. .click() 點擊的時候觸發後面的 function
3. 裡面有一個 event.preventDefault(); 可以忽略 a 標籤本身的連結功能，我們只用來當做按鈕就好。
4. 最後才是使用$('.header__nav').slideToggle(600); 來縮起或展開，注意() 裡面可以寫動畫執行秒數。

小補充：當按下漢堡選單的按鈕時要記得多觸發一個slideUp(); 才會把 menu 收起來。

$('.header__nav li a').click(function(){
    $('.header__nav').slideUp(600);
}

實際範本：https://codepen.io/jordan-tseng/pen/LYZqPGZ

.toggleClass()

我們來試試看第二種作法，但 CSS 要先改寫一下：

@media all and (max-width: 768px) {  
.header__nav{
    display: none;
    position: absolute;
    bottom:0;
    left: 0;
    right: 0;
    flex-direction: column;
    transform:translateY(100%);
    background-color: #fff;
    //本次新增
    overflow:hidden;
    height: 0px;
    transition: all .3s ;
    .nav__item{
      width: 100%;
      border-bottom:  1px solid #cccccc;
    }
  }
.hamBar{
    display: flex;
}
//本次新增
.header__nav.show{
    height: 220px;
    display: flex;
    transition: all .3s;
  }
}

為什麼會這樣改寫呢？🧐🧐

1. 就是要利用 overflow:hidden 隱藏的效果來做伸縮，所以一開始 height 要設定為 0。
2. 然後多一個.header__nav.show ：當同時具備這兩個 class 名稱時，就會觸發把 height 改成 220px。

而在 js 的部分也要微調，讓按鈕按下去時增加或減少 class 。

$(document).ready(() => {
  $('.hamBar').click(function(){
    event.preventDefault();
		//本次改成：
    $('.header__nav').toggleClass('show');  
  })
  $('.header__nav li a').click(function(){
		//本次改成：
    $('.header__nav').removeClass('show');
  })
});

實際範本：https://codepen.io/jordan-tseng/pen/MWeLOPp?editors=0110

最後讓我們看一下成果：

漢堡選單動畫

下次我會在介紹用原生 JS 如何做到 RWD Menu 的～以及介紹選單按鈕畫面滾動動畫效果。