jQueryとCSSで右側ハンバーガーメニューを実装する

既に資料がたくさんありますが、自分の備忘録として改めてまとめます。

実は、手軽に設置して手軽に日本語でマークアップできるWikiである「Konawiki3」に実装するのに使いました。

一番簡単にハンバーガーメニューを実装するには、jQueryを利用します。
ここでは、jQuery3.xを使います。

必要なファイルは3つ。

• test.html
• drawer.css
• drawer.js

それぞれ、以下の通り。

基本的なHTML

test.html

<!-- 必要な取り込み -->
<link rel="stylesheet" type="text/css" href="drawer.css" />
<script type="text/javascript" src="drawer.js"></script>

<!-- drawer.begin -->
<div id="drawer_wrapper">
  <!-- ハンバーガーメニュー -->
  <div id="hamburger_icon">
        <span class="yum"></span>
        <span class="yum"></span>
        <span class="yum"></span>
    <!-- 飛び出すメニュー(以下を書き換え) -->
    <nav class="menuitems">
      <ul>
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
     </ul>
    </nav>
  </div>
  <!-- 透明な背景ウィンドウ(閉じる専用) -->
  <div id="drawer_background"></div>
</div>
<!-- drawer.end -->

ハンバーガーメニューとメニューリストを描画するCSS

drawer.css

/* hamburger menu v0.1 */

#drawer_wrapper nav {
    position: fixed;
    top: 0;
    right: -300px;
    width: 300px;
    height: 100%;
    padding-top: 50px;
    padding-bottom: 50px;
    background:#333;
    font-size: 14px;
    box-sizing: border-box;
    z-index: 98;
}
#drawer_wrapper nav.menuitems ul li {
    display:block;
    padding: 8px 28px;
    border-bottom: 1px dotted #555;
    background-color: #444;
    color: silver;
}
#drawer_wrapper nav.menuitems ul li a {
    text-decoration: none;
    color: #ddd;
    width: 99%;
    display:block;
}
#drawer_wrapper #hamburger_icon {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 30px;
    height: 24px;
    z-index: 99;
    box-sizing: border-box;
    cursor: pointer;
    -webkit-transition: all 400ms;
    transition: all 400ms
}
#drawer_wrapper #hamburger_icon span.yum {
    position: absolute;
    width: 30px;
    height: 4px;
    background: #666;
    border-radius: 10px;
    -webkit-transition: all 400ms;
    transition: all 400ms
}
#drawer_wrapper #hamburger_icon span:nth-child(1) {
    top: 0;
}
#drawer_wrapper #hamburger_icon span:nth-child(2) {
    top: 10px;
}
#drawer_wrapper #hamburger_icon span:nth-child(3) {
    top: 20px;
}
#drawer_wrapper #hamburger_icon.open span {
    background: #fff;
}
#drawer_wrapper #hamburger_icon.open span {
    width: 24px;;
}
#drawer_wrapper .contents section p {
    position: absolute;
    top: 50%;
    width: 30%;
    line-height: 1.4;
    font-size: 20px;
    color: #fff;
}
#drawer_wrapper .contents section:nth-child(odd) p {
    left: 10%
}
#drawer_wrapper .contents section:nth-child(even) p {
    right: 10%
}
#drawer_background {
    z-index: 97;
    position: fixed;
    background-color: rgba(0,0,0,0.5);
    display: none;
}

ハンバーガーメニューを開けたり閉めたりするJS

drawer.js

$(function(){

  const btn = $('#hamburger_icon');
  const win = $("#drawer_background");
  const nav = $("nav.menuitems");
  
  function toggleMenu() {
    if (btn.hasClass("open")) {
      closeMenu();
    } else {
      openMenu();
    }
  }
  
  function openMenu() {
    btn.addClass("open");
    execMenu(0);
    win.css('left', '0px');
    win.css('top', '0px');
    win.css('height', '100%');
    win.css('width', '100%');
    win.fadeIn();
  }
  
  function closeMenu() {
    btn.removeClass("open");
    execMenu(-300);
    win.fadeOut();
  }
  
  function execMenu(pos) {
    nav.stop().animate({
        right: pos
    }, 200);
  }
  btn.on("click", toggleMenu);
  win.on("click", closeMenu);
  
});