フルスクリーン表示するjQueryのレスポンシブメニュー

ウィンドウ幅が一定の幅になるとハンバーガーメニューになり、クリックするとフルスクリーンで表示するレスポンシブなメニューを作成しました。

ハンバーガーメニューのエフェクトはNx World様のコードをお借りしています。

サンプル

See the Pen レスポンシブでフルスクリーン表示するメニュー; by ponzu (@ponzu😉 on CodePen.

↓別ウィンドウで見たい方はこちら

デモページ

html

htmlでは、スマホ表示になった時用のハンバーガーメニュー .nav-buttonと、PC表示、スマホ表示共通のナビゲーション用のコード .nav-wrap を記述します。

<div class="header">
  <div class="logo">SITE NAME</div>
  <a class="nav-button" href="#">
    <span></span>
    <span></span>
    <span></span>
  </a>
  <nav class="nav-wrap">
    <ul class="nav">
      <li><a href="#">ABOUT</a></li>
      <li><a href="#">SERVICE</a></li>
      <li><a href="#">BLOG</a></li>
      <li><a href="#">CONTACT</a></li>
    </ul>
  </nav>
</div>

jQuery

jQueryでハンバーガーメニューをクリックした時のボタンの形状、メニューの表示/非表示を変更するために、クラス名の付け替えを行っています。
ボタンをクリックした時に.active というクラスが付いていたら、メニューがフルスクリーン表示されているということなので、.activeを削除し、ボタンを「☓」から「≡」に変えます。
そして、メニューに.closeというクラス名を付与して、メニューを非表示にします。
else以降は、「≡」ボタンを押した時にメニューをフルスクリーン表示するために、.openというクラス名を付与して、メニューを表示し、ボタンを「☓」に変更させる処理です。

$('.nav-button').on('click',function(){
  if( $(this).hasClass('active') ){
    $(this).removeClass('active');
    $('.nav-wrap').addClass('close').removeClass('open');
  }else {
    $(this).addClass('active');
    $('.nav-wrap').addClass('open').removeClass('close'); 
  }
});

CSS

CSSではPC表示とスマホ表示それぞれの挙動を設定しています。
横幅が481px以上ではハンバーガーメニューは表示されず、メニューは横並びで表示されるようになっています。

.header {
  display: flex;
  justify-content: space-between;
  background: #ddd;
  padding: 20px;
  .logo {
    font-size: 20px;
  }
}
.nav-button {
  display: none;
}
.nav {
  a {
    color: #000;
    text-decoration: none;
    font-size: 14px;
    color: #448aff;
  }
  li {
    display: inline-block;
    margin: 0 10px;
  }
}
.nav-wrap.open {
  display: block;
}
.nav-wrap.close {
  display: none;
}
@media screen and (min-width: 481px) {
  .nav-wrap {
    display: block ;
  }
}
.content {
  padding: 20px;
}
@media screen and (max-width: 480px) {
  .nav-button {
    display: block;
    cursor: pointer;
  }
  .nav-wrap {
    position: fixed;
    left: 0;
    top: 0;
    display: none;
    z-index: 10;
    background-color: rgba(0, 0, 0, 0.7);
    width: 100%;
    height: 100%;
    .nav {
      height: 100%;
      position: relative;
      overflow-x: hidden;
      overflow-y: auto;
    }
    li {
      display: block;
      margin: 2em;
      a {
        color: #fff;
        font-size: 18px;
      }
    }
  }
  /*メニューボタンのエフェクト*/  .nav-button,
  .nav-button span {
    display: inline-block;
    transition: all 0.4s;
    box-sizing: border-box;
  }
  .nav-button {
    z-index: 20;
    position: relative;
    width: 40px;
    height: 36px;
  }
  .nav-button span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: #fff;
    border-radius: 4px;
  }
  .nav-button span:nth-of-type(1) {
    top: 0;
  }
  .nav-button span:nth-of-type(2) {
    top: 16px;
  }
  .nav-button span:nth-of-type(3) {
    bottom: 0;
  }
  .nav-button.active span:nth-of-type(1) {
    -webkit-transform: translateY(16px) rotate(-45deg);
    transform: translateY(16px) rotate(-45deg);
  }
  .nav-button.active span:nth-of-type(2) {
    opacity: 0;
  }
  .nav-button.active span:nth-of-type(3) {
    -webkit-transform: translateY(-16px) rotate(45deg);
    transform: translateY(-16px) rotate(45deg);
  }
}