【jQuery】ハンバーガーメニューの作り方

HTMLにボタンを追加

まずは、HTMLにハンバーガーボタンのパーツとなる要素を書いていきます。

html

    <div class="burger-btn">
      <span class="bar bar_top"></span>
      <span class="bar bar_mid"></span>
      <span class="bar bar_bottom"></span>
    </div>

CSSでボタンを装飾

それではCSSでハンバーガーボタンの見た目を作っていきます。
下記では、3本線を作成してます。

css

   .burger-btn {
    display: block;
    width: 39px;
    height: 39px;
    position: relative;
    z-index: 3;
    border: none;
    background-color: rgb(0, 0, 0);
    margin: 0 0 0 auto;
  }

  .bar {
    width: 20px;
    height: 1px;
    display: block;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background-color: #fff;
  }

  .bar_top {
    top: 10px;
  }

  .bar_mid {
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .bar_bottom {
    bottom: 10px;
  }

PC版の方では「.burger-btn」をdisplay: none;にして、ハンバーガーボタンを非表示にします。

CSSでハンバーガーメニューが開いたときの見た目を作成

それでは次に、ハンバーガーメニューが開いたときの見た目をつくっていきましょう。
ハンバーガーメニューが開いたときは以下2点が見た目の変化をして現れます。

⑴ボタンが3本線から☓印になる
⑵メニューが非表示から全画面表示になる

#3本線が☓印になるCSS

3本線に対して、closeというclassを付加したときにばつ印になるようにCSSを書いていきます。

css

   
  .burger-btn.close .bar_top {
    transform: translate(-50%, 10px) rotate(45deg);
    transition: transform 0.3s;
  }
  .burger-btn.close .bar_mid {
    opacity: 0;
    transition: opacity 0.3s;
  }
  .burger-btn.close .bar_bottom {
    transform: translate(-50%, -8px) rotate(-45deg);
    transition: transform 0.3s;
  }

これで、「.burger-btn」にcloseというclassが追加されたときに、3本線がばつ印になります。

ハンバーガーメニューを全画面表示にする

次にハンバーガーメニューを全画面表示にするCSSを書きます。

css

   
  .nav-menu li a {
    color: rgb(255, 255, 255);
    font-size: 1.5rem;
 

  .nav-sns-color {
    color: rgb(255, 255, 255);
    font-size: 2rem;
  }

  .nav-item {
    padding: 3rem;
  }

  .nav-sns-list {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
  }

  .nav-list {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    height: 100%;
  }

  .nav-header-menu {
    display: none;
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2;
  }

  .nav-sns-menu {
    width: 100%;
    height: 40%;
    background-color: #1b1310;
    z-index: 2;
    display: flex;
    justify-content: center;
  }

  .nav-sns-menu ul {
    justify-content: center;
  }

  .nav-menu {
    width: 100%;
    height: 60%;
    background-color: #1b1310;
    flex-direction: column;
    z-index: 2;
  }

  .nav-menu.nav-list {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
  }

  .nav-menu.nav-item {
    margin-right: 0;
    margin-bottom: 40px;
  }

上記が追記できたら、一番上の display:none; のコメントアウトを外して非表示にしておきます。

※私のポートフォリオにて記述したコードを記載しているので、コードが多くなってます。

jQueryでクリックイベント設定

それでは最後にjQueryでクリックイベントを設定して、ハンバーガーメニューが開閉するようにしましょう。
まずは下記Googleが提供しているCDN「jQuery」と「script.js」を読み込みます。

jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>    
<script src="./js/script.js"></script>

それでは、script.jsに以下の記述をしましょう。

jQuery

$(".burger-btn").on("click", function () { //「burger-btn」をクリックすると
    $(".burger-btn").toggleClass("close");　//closeというclassを追加/削除。
    $(".nav-header-menu").fadeToggle(500); //0.5秒かけてフェードイン/フェードアウト。
  }); 

ここで、ブラウザの状態を確認しましょう。
ハンバーガーメニューが表示されたときにスクロールできてしまいます。
なので、style.cssとscript.jsに以下の記述を追記します。

#【style.css】

css

 body.noscroll{
  overflow: hidden;
}

jQuery

$(".burger-btn").on("click", function () {
    $(".burger-btn").toggleClass("close");
    $(".nav-header-menu").fadeToggle(500);
    $("body").toggleClass("noscroll");
  });

これで、ハンバーガーメニューが開いたときにスクロールを固定できます。

#該当リンクへ遷移し、全体画面が閉じるように設定

jQuery

  $("#nav-menu a[href]").on("click", function (event) { //リンクがクリックされた時に、
    $(".burger-btn").trigger("click"); //trigger("click")を実行
  });

以上でハンバーガーメニューが実装されたかと思います。

#まとめ
現在色んな場所で使われているハンバーガーメニュー。
シンプルなデザインとなりましたが、是非ご参考になればと思います。