使用JQuery製作漢堡選單

漢堡選單是一個很常使用在手機版網頁的菜單呈現方式，因為按鈕是三條線，很像一個漢堡所以稱為漢堡選單。

原理

漢堡選單的原理是利用jquery的toggleClass來為navbar新增或移除css class，所以分成兩個部分，一個是css，一個是jquery。

CSS

.navbar{
	width: 100%;
	max-height: 0%;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 10;
    transform: translateY(100%);        
    overflow: hidden;
    transition: max-height 0.7s;
    background: $navbar__color;
}
.navbar.show{
	max-height: 500px;
}

首先是navbar的樣式，將navbar的高度設為0讓它消失，並用position和transform將navbar固定在自己想要的位置，transition設定展開動畫，overflow將多餘的內容隱藏，背景色設定成和原本的navbar相同。

.show將navbar的高度變成500px(這裡可以自訂)，因為transition的緣故會產生動畫。

JQuery

$('.menu-btn').click(function (e) {
    e.preventDefault();
    $('.navbar').toggleClass('show');
  });

按下漢堡選單後(我這裡的class叫menu-btn)，對navbar新增show class，所以高度會變成500，這時菜單就會出現了。而e.preventDefault()單純是用來取消a的預設動作。

範例