ハンバーガーメニューで同時に動作するクローズ（バツ）の切り替えと要素のスライドを作成する - レクチャーサイト

09ハンバーガーメニューで同時に動作するクローズ（バツ）の切り替えと要素のスライドを作成する

メインコンテンツ

イベント発生させる要素（ハンバーガーメニュー）のID名 #hamburger
イベント発生させる要素（横からスライド）のID名 #overlay
追加または削除するクラス名 .active

-- js --
$(function(){
  $('#hamburger').click(function(){
    $('#hamburger, #overlay').toggleClass('active');
  });
});

-- css --
#question249 #hamburger {
  position: fixed;
  top: 20px;
  right: 20px;
  cursor: pointer;
  z-index: 99;
}
#overlay {
  position: fixed;
  top: 0;
  right: -80%;
  width: 80%;
  height: 100%;
  background: #aaa;
  opacity: 0;
  transition: .5s;
  z-index: 98;
}
#overlay.active {
  right: 0;
  opacity: 1;
}