ハンバーガーメニューをサクッと作る方法【初心者も簡単に作成】

こんにちは、みったに（@mittani_s）です。

今回は、ハンバーガーメニューの実装方法について書いていきます。コピペでスグに実装できます。

• ハンバーガーメニューってよく聞くけど、難しそう、、、
• パソコンとスマホで分けるの面倒そう、、、
• できるだけ簡単に実装したい！

僕がこういった悩み持っていたときに、コピペですぐ使えるコードがサクッと拾えたら良いなと思っていたので、今回記事にしました。どのコードが何をしているのかがわかるようにコードの説明もセットで載せておきます。

レスポンシブなハンバーガーメニューをjQueryとCSSで実装する方法

まずハンバーガメニューについて簡単に解説しておきます。

ハンバーガーメニューとは

ハンバーガーメニューとは、画面サイズを小さくしたときに、右上に出ている3本線のマークのことです。

スマホのサイズで画面を見る場合、パソコンと比べて横幅が狭くなるので、クリックしたときだけ、メニューが表示されるという仕組みを作っています。今ではかなり一般的な形になっているかなと思います。

ハンバーガーメニューを作る手順

ハンバーガーメニューを作る手順は下記のとおりです。

• HTMLでマークとメニューを作成
• CSSでマークがクリックされたときのスタイルを作成
• jQueryでクリックしたときに設定したスタイルのclassを追加

方針としては、上記のとおりです。要するに、クリックされたときに、あらかじめ設定されたスタイルのclassが当たるようにしていく感じです。

レスポンシブなハンバーガーメニューのコード

では、早速コードを書いていきます。下記のとおりです。

更新情報：2021年6月4日

コードが冗長的であったため、新しいコードに改善しました。

HTMLのコード

<!-- クリックする３本線の部分 -->
<span class="nav_toggle">
  <i></i>
  <i></i>
  <i></i>
</span>
<!-- クリックで表示されるメニュー -->
<nav class="nav">
  <ul class="nav_menu_ul">
    <li class="nav_menu_li"><a href="#">FEATURE</a></li>
    <li class="nav_menu_li"><a href="#">PRODUCTS</a></li>
    <li class="nav_menu_li"><a href="#">ACCESS</a></li>
  </ul>
</nav>

こういった感じです。

コメントでも記載したとおり、上側が「３本線のハンバーガーの部分」で、下側がクリックで表示・非表示が切り替わるメニューのところです。

わかりやすく分割しておくと、下記のとおりです。

ハンバーガーのマークの部分

<!-- クリックする３本線の部分 -->
<span class="nav_toggle">
  <i></i>
  <i></i>
  <i></i>
</span>

クリックで表示されるメニューの部分

<!-- クリックで表示されるメニュー -->
<nav class="nav">
  <ul class="nav_menu_ul">
    <li class="nav_menu_li"><a href="#">FEATURE</a></li>
    <li class="nav_menu_li"><a href="#">PRODUCTS</a></li>
    <li class="nav_menu_li"><a href="#">ACCESS</a></li>
  </ul>
</nav>

CSSのコード

次にCSSのコードを書いていきます。まずは、全体のコードを載せておきます。

/* PCでは非表示にしておく */
.nav_toggle,
.nav {
  display: none;
}

/* スマホサイズで見た場合のスタイル */
@media screen and (max-width: 480px) {
/* ハンバーガーのマーク */
  .nav_toggle {
    display: block;
    position: relative;
    width: 1.75rem;
    height: 1.5rem;
    margin-right: 10px;
    z-index: 2;
  }
  .nav_toggle i {
    display: block;
    width: 100%;
    height: 2px;
    background-color: #333;
    position: absolute;
    transition: transform 0.5s, opacity 0.5s;
  }
  .nav_toggle i:nth-child(1) {
    top: 0;
  }
  .nav_toggle i:nth-child(2) {
    top: 0;
    bottom: 0;
    margin: auto;
  }
  .nav_toggle i:nth-child(3) {
    bottom: 0;
  }

  /* クリックされた後のハンバーガーのマーク */
  .nav_toggle.show i:nth-child(1) {
    transform: translateY(10px) rotate(-45deg);
  }
  .nav_toggle.show i:nth-child(2) {
    opacity: 0;
  }
  .nav_toggle.show i:nth-child(3) {
    transform: translateY(-12px) rotate(45deg);
  }

  /* クリックで表示されるメニュー：クリックされる前 */
  .nav {
    display: flex;
    position: fixed;
    align-items: center;
    justify-content: center;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s, visibility 0.5s;
    background-color: #fff;
    z-index: 1;
  }
  .nav_menu_li {
    margin-bottom: 30px;
  }
  .nav_menu_li a {
    color: #ee6557;
    text-decoration: none;
  }

  /* クリックで表示されるメニュー：クリックされた後 */
  .nav.show {
    opacity: 1;
    visibility: visible;
  }
}

上記のとおりです。

HTMLでは、「ハンバーガーのマーク」と「クリックで表示されるメニュー」に分けていましたが、さらに、クリックされた後とクリックされる前のスタイルで分けておきます。

まとめると、下記のとおりです。

• クリックされる前のハンバーガーのマーク
• クリックされた後のハンバーガーのマーク
• クリックされる前のメニュー
• クリックされた後のメニュー

こちらも分割しておきますね。

クリックされる前のハンバーガーのマーク

  .nav_toggle {
    display: block;
    position: relative;
    width: 1.75rem;
    height: 1.5rem;
    margin-right: 10px;
    z-index: 2;
  }
  .nav_toggle i {
    display: block;
    width: 100%;
    height: 2px;
    background-color: #333;
    position: absolute;
    transition: transform 0.5s, opacity 0.5s;
  }
  .nav_toggle i:nth-child(1) {
    top: 0;
  }
  .nav_toggle i:nth-child(2) {
    top: 0;
    bottom: 0;
    margin: auto;
  }
  .nav_toggle i:nth-child(3) {
    bottom: 0;
  }

クリックされた後のハンバーガーのマーク

  .nav_toggle.show i:nth-child(1) {
    transform: translateY(10px) rotate(-45deg);
  }
  .nav_toggle.show i:nth-child(2) {
    opacity: 0;
  }
  .nav_toggle.show i:nth-child(3) {
    transform: translateY(-12px) rotate(45deg);
  }

クリックされる前のメニュー

  ​.nav {
   ​display: flex;
   ​position: fixed;
   ​align-items: center;
   ​justify-content: center;
   ​top: 0;
   ​left: 0;
   ​right: 0;
   ​bottom: 0;
   ​opacity: 0;
   ​visibility: hidden;
   ​transition: opacity 0.5s, visibility 0.5s;
   ​background-color: #fff;
   ​z-index: 1;
 ​}
  .nav_menu_li {
    margin-bottom: 30px;
  }
  .nav_menu_li a {
    color: #ee6557;
    text-decoration: none;
  }

クリックされた後のメニュー

  .nav.show {
    opacity: 1;
    visibility: visible;
  }

状態別にパーツを分割すると上記の感じです。そして、これらは、スマホサイズのメディアクエリの中に入れておきます。

最後に、PC上では非表示にしておくため、下記のようにしておきます。

PCでは非表示に設定

.nav_toggle,
.nav {
  display: none;
}

これでCSSの設定は完了です。

jQueryのコード

最後にjQueryのコードを書いていきます。

<script>
  $(".nav_toggle").on("click", function () {
    $(".nav_toggle, .nav").toggleClass("show");
  });
</script>

jQueryはこれだけです。
これをbodyタグを閉じる直前辺りに書いておきます。これでクリックするとハンバーガーメニューが動くようになります。

下記にて、意味合いを簡単に解説しておきます。

$(".nav_toggle").on("click", function () {

上記は、「.nav_toggleをクリックしたら」という、jQueryの発動条件を書いています。on("click"のところがクリックの意味合いですね。

$(".nav_toggle, .nav").toggleClass("show");

上記は、クリック後に実行されるプログラムです。

「nav_toggleやnavのクラスが付与されているタグに対して、showというクラスを付けたり、外したりしますよ」という意味です。

toggleClassは指定したクラスを付与したり、外したりする機能を持っています。付与している場合は外し、逆についていない場合は付与します。

コピペで簡単作成

これでコピペだけでも、ハンバーガーメニューが作れるはずです。

もし、WordPressのカスタマイズやコーディングなどでお困りのことがありましたら、代行することも可能ですので、下記よりお問い合わせくださいませ。

≫コーディングに関するご依頼はこちら

それでは、以上となります。
またお会いしましょう！