ハンバーガーメニューをつくりました

こんにちは。

デイトラ中級に入り、JavaScript と　JQueryの基礎を学習しました。

ここからプログラミングっぽくなりました。

今回はjQureyをつかってハンバーガーメニューを実装していったので、試行錯誤つくったものを解説していきます。

作成サンプルはこちら　↓

ハンバーガーメニューのサンプル

実装した内容は以下になります。

ハンバーガーメニューボタンをHTML CSSで作成。
クリックするとメニューが開くと同時にハンバーガーメニューが×マークに変形。同時に画面全体を暗くする。
×マークをクリックすることでメニューがとじる。同時に画面の明るさを戻す
メニュー展開時の画面が暗いところを押してもメニューを閉じて×マークがハンバーガーに戻す。
メニューをおしたら指定箇所にリンクしてメニューを閉じる、画面の明るさを戻す。

以下、実装コードです。

[ HTML ]

ハンバーガーメニューボタン

<div class=“hamburger-menu”>
    <span class=“hamburger-menu__line”></span>
  </div>

ハンバーガーボタンクリックで開くメニュー
  <ul class=“header-drawer”>
     <li><a href=“”>aaaa</a></li>
     <li><a href=“”>aaaa</a></li>
     <li><a href=“”>aaaa</a></li>
     <li><a href=“”>aaaa</a></li>  
  </ul>
 
ハンバーガーメニュー展開時に全体を暗くする用のコード

 <div id=“gray-display”></div>
 
 
 
 
 
[ CSS ] 
//ハンバーガーメニューアイコン———————-
.hamburger-menu{
  display: flex;
  align-items: center;
  width: 32px;
  height: 32px;
  cursor: pointer;
  z-index: 10;
  position: absolute;
  right: 30px;
  top: 30px;
 
}
 
.hamburger-menu__line{
  display: block;
  width: 100%;
  height: 4px;
  border-radius: 4px;
  background-color:red;
  position: relative;
  transition: all 0.5s;
 
}
 
.hamburger-menu__line::before,
.hamburger-menu__line::after{
  content: ”;
  display: block;
  width: 100%;
  height: 4px;
  border-radius: 4px;
  background-color: red;
  position: absolute;
  transition: all 0.5s;
 
}
 
.hamburger-menu__line::before{
  transform: translateY(-12px);
}
.hamburger-menu__line::after{
  transform: translateY(12px);
}
 
 
/jQueryでopenクラスを追加することでハンバーガーメニューを×に変形させる—-
.hamburger-menu.open .hamburger-menu__line{
  background-color: transparent;
}
.hamburger-menu.open .hamburger-menu__line::before{
  transform: rotate(45deg);
}
.hamburger-menu.open .hamburger-menu__line::after{
  transform: rotate(-45deg);
}
//ハンバーガーメニュークリックで開くドロワーメニュー——-
.header-drawer {
  position: fixed;
  top: -20px;
  right: 0;
  background-color: black;
  width: 200px;
  height: 400px;
  padding-top: 100px;
  z-index: 9;
  display: none;
  }
 
  .header-drawer li {
    font-size: 28px;
    margin-bottom: 20px;
    padding-left: 30px;
    list-style: none;
    text-align: center;
  }
 
 
//メニュー展開時画面暗くする————
#gray-display {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: gray;
  opacity: 0.8;
  z-index: 8;
 //——————————————
 
 
 
 
 
[ jQuery ] 
$(function() {
 
  //ハンバーガーメニュークリックでイベント作動
  //ハンバーガーメニューにopenクラスがついていれば外す
  //   →×からハンバーガーにもどる
  //ドロワーメニュー閉じる  画面暗い解除
  $(‘.hamburger-menu’).click( function() {
    if($(this).hasClass(‘open’)){
      $(this).removeClass(‘open’);
      $(‘.header-drawer’).slideToggle();
      $(‘#gray-display’).hide();
 
  //ハンバーガーメニューにopenクラスがついていなければ追加
  //   →ハンバーガーから×に変形
  //ドロワーメニュー開く  画面暗くする展開
    }else{
      $(‘.header-drawer’).slideToggle();
      $(‘#gray-display’).show(); 
      $(this).addClass(‘open’);
    }
  });
 
 
  //グレイ部分のクリックで全て閉じる
  $(‘#gray-display’).click(function() {
    $(this).next().fadeOut(200,function() {
    $(‘#gray-display’).hide();
      $(‘.header-drawer’).slideUp();
      $(‘.hamburger-menu’).removeClass(‘open’);
    });
  });
 
  //ドロワーメニュークリックで全て閉じる
   //×をハンバーガーに戻す
  $(‘.header-drawer li’).click(function() {
  $(‘#gray-display’).hide();
      $(‘.header-drawer’).hide();
      $(‘.hamburger-menu’).removeClass(‘open’);
  });
 
});
 
 
 以上がハンバーガーメニュー実装になります。
まだ基礎しか勉強していないなかでの実装ですので、もっと効率的なものがあれば是非教えてください。
 
それでは
 
 