<header>
    
    <!-- ハンバーガーメニュー -->
    <button class="hamburger-button"></button>
    
    <!-- ナビゲーション -->
    <nav class="hamburger-nav">
      <ul>
        <li><a href="#">メニュー1</a></li>
        <li><a href="#">メニュー2</a></li>
        <li><a href="#">メニュー3</a></li>
        <li><a href="#">メニュー4</a></li>
      </ul>
    </nav>
    
  </header>
  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script></script>
@charset "utf-8";
/* CSS Document */
body {
		margin: 0;
	}
	header {
		position: fixed;
		background-color: #eeeeee;
		height: 100px;
		width: 100%;
	}
	.hamburger-button {
		top: 30px;
		right: 40px;
	}
  .hamburger-nav {
    height: 100vh;
  }

.hamburger-button {
  display: flex; /* media query時にはflexでもどして */
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 1002;
  background-color: #fff;
  border: none;
  cursor: pointer;
  width: 40px;
  height: 40px;
  outline: none;
}
.hamburger-button svg {
  height: 25px; /* autoではなく同じ数字で */
  width: 25px; /* autoではなく同じ数字で */
}
.hamburger-button path {
  fill: #000;
}
.hamburger-nav {
  position: fixed;
  width: 100%;
  background-color: #fff;
  z-index: 1001;
  padding: 20px;
  display: none;
}
#hamburger-overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0,0,0,.5);
  pointer-events: none;
  opacity: 0;
  z-index: 1000;
}
// JavaScript Document

$(function(){

  /* オプション設定 */
  const options = {
    slide: 'top', /* スライド方向(none, top, bottom, left, right) */
    duration: 300, /* 表示アニメーション速度(ms) */
    weight: 'regular', /* アイコン太さ(regular, light, solid) */
    dark: true, /* 画面の暗転(true, false) */
  };

  const icons = {
    barsRegular: '<svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="bars" class="svg-inline--fa fa-bars fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg>',
    barsLight: '<svg aria-hidden="true" focusable="false" data-prefix="fal" data-icon="bars" class="svg-inline--fa fa-bars fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M442 114H6a6 6 0 0 1-6-6V84a6 6 0 0 1 6-6h436a6 6 0 0 1 6 6v24a6 6 0 0 1-6 6zm0 160H6a6 6 0 0 1-6-6v-24a6 6 0 0 1 6-6h436a6 6 0 0 1 6 6v24a6 6 0 0 1-6 6zm0 160H6a6 6 0 0 1-6-6v-24a6 6 0 0 1 6-6h436a6 6 0 0 1 6 6v24a6 6 0 0 1-6 6z"></path></svg>',
    barsSolid: '<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="bars" class="svg-inline--fa fa-bars fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"></path></svg>',
    timesRegular: '<svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="times" class="svg-inline--fa fa-times fa-w-10" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z"></path></svg>',
    timesLight: '<svg aria-hidden="true" focusable="false" data-prefix="fal" data-icon="times" class="svg-inline--fa fa-times fa-w-10" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M193.94 256L296.5 153.44l21.15-21.15c3.12-3.12 3.12-8.19 0-11.31l-22.63-22.63c-3.12-3.12-8.19-3.12-11.31 0L160 222.06 36.29 98.34c-3.12-3.12-8.19-3.12-11.31 0L2.34 120.97c-3.12 3.12-3.12 8.19 0 11.31L126.06 256 2.34 379.71c-3.12 3.12-3.12 8.19 0 11.31l22.63 22.63c3.12 3.12 8.19 3.12 11.31 0L160 289.94 262.56 392.5l21.15 21.15c3.12 3.12 8.19 3.12 11.31 0l22.63-22.63c3.12-3.12 3.12-8.19 0-11.31L193.94 256z"></path></svg>',
    timesSolid: '<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="times" class="svg-inline--fa fa-times fa-w-11" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512"><path fill="currentColor" d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"></path></svg>',
  };
  const $nav = $('.hamburger-nav');
  const $button = $('.hamburger-button');
  let navHeight = $nav.outerHeight();
  let navWidth = $nav.outerWidth();
  const weight = options.weight[0].toUpperCase() + options.weight.substring(1);
  const barsIcon = icons['bars' + weight];
  const timesIcon = icons['times' + options.weight[0].toUpperCase() + options.weight.substring(1)];
  
  /* overlay(z-index対策) */
  $nav.parent().append('<div id="hamburger-overlay"></div>');
  const $overlay = $('#hamburger-overlay');
  $overlay.css('transition-duration', (options.duration / 1000) + 's');
  if (! options.dark) {
    $overlay.css('background-color', 'transparent');
  }
  
  /* メニュー収納 */
  prepare();
  setTimeout(() => {
    prepare();
  }, 0)
  $(window).on('resize', function() {
    prepare();
  });
  
  /* クリック処理 */
  let isOpen = false;
  $button.on('click', function() {
    isOpen ? close() : open();
    isOpen = ! isOpen;
  });
  
  /* Prepare */
  function prepare() {
    navHeight = $nav.outerHeight(); /* responsive対応 */
    navWidth = $nav.outerWidth(); /* responsive対応 */
    close();
    setTimeout(() => {
      $nav.css('display', 'block');
      $nav.css('transition-duration', (options.duration / 1000) + 's');
    }, 0); /* 表示される不具合対策 */
  }
  /* Close */
  function close() {
    if (options.slide === 'none') {
      $nav.css('opacity', 0);
    } else {
      if (options.slide === 'top' || options.slide === 'bottom') {
        $nav.css('left', 0); // 要検討
        $nav.css(options.slide, - navHeight);
      } else {
        $nav.css('top', 0); // 要検討
        $nav.css(options.slide, - navWidth);
      }
    }
    $button.html(barsIcon);
    $overlay.css('opacity', 0);
    $button.removeClass('close');
  }
  /* Open */
  function open() {
    if (options.slide === 'none') {
      $nav.css('opacity', 1);
      $nav.css('top', 0);
    } else {
      $nav.css(options.slide, 0);
    }
    $button.html(timesIcon);
    $overlay.css('opacity', 1);
    $button.addClass('close');
  }
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.