【jQuery】ハンバーガーメニューを作りたい（ページ内リンク版）

WEBのレスポンシブデザイン化が進み、もはや定番となって久しいハンバーガーメニュー。jQueryで動くアイコンフォント付きの作成例をご紹介します。

動作サンプル

HTML

メニュー開閉ボタンとページ内リンクの飛び先コンテンツで構成されています。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>hamburger navigation</title>
  <meta name="description" content="Sample Page">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/font-awesome-4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="css/common.css">
</head>
<body>

  <header>
    <nav class="hamburger-nav">
      <button type="button" id="hamburger-nav-toggle" class="hamburger-nav-toggle-btn close"></button>
      <ul class="hamburger-nav-list">
        <li><a href="#first">first</a></li>
        <li><a href="#second">second</a></li>
        <li><a href="#third">third</a></li>
      </ul>
    </nav><!-- /.hamburger-nav -->
  </header>

  <main class="sample-articles">
    <article id="first">
      <h1>first heading</h1>
      <p>ここにはコンテンツの本文が入ります。</p>

      <h2>H2 heading</h2>
      <p>ここにはコンテンツの本文が入ります。</p>

      <ol>
        <li>Ordered list item.</li>
        <li>Ordered list item.</li>
        <li>Ordered list item.</li>
        <li>Ordered list item.</li>
        <li>Ordered list item.</li>
      </ol>
    </article>

    <article id="second">
      <h1>second heading</h1>
      <p>ここにはコンテンツの本文が入ります。</p>

      <h2>H2 heading</h2>
      <p>ここにはコンテンツの本文が入ります。</p>

      <h2>H2 heading</h2>
      <p>ここにはコンテンツの本文が入ります。</p>
    </article>

    <article id="third">
      <h1>third heading</h1>
      <p>ここにはコンテンツの本文が入ります。</p>

      <h2>H2 heading</h2>
      <p>ここにはコンテンツの本文が入ります。</p>

      <ul>
        <li>Unordered list item.</li>
        <li>Unordered list item.</li>
        <li>Unordered list item.</li>
        <li>Unordered list item.</li>
        <li>Unordered list item.</li>
      </ul>

      <h3>H3 heading</h3>
      <p>ここにはコンテンツの本文が入ります。</p>

      <h2>H2 heading</h2>
      <p>ここにはコンテンツの本文が入ります。</p>
    </article>
  </main>

  <footer>
    <p><small>Copyright &copy; expexp.jp All Rights Reserved.</small></p>
  </footer>

  <!-- SCRIPTS -->
  <script src="js/jquery-1.12.4.min.js"></script>
  <script src="js/jquery.smooth-scroll.min.js"></script>
  <script src="js/common.js"></script>
</body>
</html>

CSS（common.css）

CSSは見栄えのみ。

body {
  /* 英文折り返し */
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/*---------------------------------------------
  Hamburger Navigation
  ---------------------------------------------*/
.hamburger-nav-toggle-btn {
  margin: 1em;
}
.hamburger-nav-toggle-btn.close::before, .hamburger-nav-toggle-btn.open::before {
  font-family: 'FontAwesome';
}
.hamburger-nav-toggle-btn.open::before {
  content: '\f00d';
}
.hamburger-nav-toggle-btn.close::before {
  content: '\f0c9';
}

.hamburger-nav-list {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
  background: #c9c9c9;
}
.hamburger-nav-list > li {
  border-bottom: 1px solid #eeeeee;
}
.hamburger-nav-list > li a {
  display: block;
  padding: 10px 1em;
  text-decoration: none;
}

.sample-articles {
  padding: 10px 1em;
}
.sample-articles > article {
  margin-bottom: 50px;
  padding-top: 100px;
}

footer {
  border-top: 1px solid #c9c9c9;
  margin-top: 100px;
  padding: 0 1em 100px;
}

JavaScript（common.js）

ハンバーガーメニューの動作は、jqueryがメインとなります。スムーススクロールは動きをキレイに見せるおまけです。

/* Hamburger Navigation Sample */
$(function() {

  /* 開閉ボタンをクリックしたら以下の関数を実行 */
  $('#hamburger-nav-toggle').click(function() {

    /* 開閉ボタンのクラスが'close'（閉じている状態）の場合 */
    if($('#hamburger-nav-toggle').attr("class") == 'hamburger-nav-toggle-btn close') {

      /* ハンバーガーメニューを展開 */
      $('.hamburger-nav-list').slideDown();

      /* さらに、開閉ボタンのクラスから'close'を削除し、'open'を付与する */
      $(this).removeClass("close").addClass("open");
    }

    /* 開閉ボタンのクラスが'close'ではない場合 */
    else {

      /* ハンバーガーメニューを収束 */
      $('.hamburger-nav-list').slideUp(function() {

        /* メニューが収束したのち、開閉ボタンのクラスから'open'を削除し、'close'を付与する */
        $('#hamburger-nav-toggle').removeClass("open").addClass("close");
      });
    }
  }); /* 開閉ボタンをクリックした時の動作はここまで */

  /* ハンバーガーメニューのアンカーをクリックしたら以下の関数を実行 */
  $('.hamburger-nav-list a').click(function() {

    /* 開いている必要はないので、ハンバーガーメニューを収束 */
    $('.hamburger-nav-list').slideUp(function() {

      /* メニューが収束したのち、開閉ボタンのクラスから'open'を削除し、'close'を付与する */
      $('#hamburger-nav-toggle').removeClass("open").addClass("close");
    });
  });

  /* SmoothScroll（おまけ） */
  $('.hamburger-nav-list a').smoothScroll();

});