コピペで使えるHTMLとJavascriptでバーガーメニュー

本ページの左上にあるバーガーメニュー（ハンバーガーメニュー）を作成するHTML及びJavascriptです。
htmlおよびJavascript

<nav class="mamSideMenu">
  <ul>
    <li style="font-weight:bold;border-bottom:2px solid #000;">■メニューサンプル</li>
    <li><a href="/javascript/css_nav_vertical_menu.html">HTML+CSSで縦メニュー</a></li>
    <li><a href="/javascript/css_nav_vertical_menu2.html">円弧のメニュー</a></li>
    <li><a href="/javascript/css_nav_vertical_menu3.html">HTML+CSSでカラフル縦メニュー1</a></li>
    <li><a href="/javascript/css_nav_vertical_menu4.html">HTML+CSSでカラフル縦メニュー2</a></li>
    <li><a href="/javascript/css_nav_vertical_menu5.html">HTML+CSSで立体縦メニュー</a></li>
    <li><a href="/javascript/css_nav_vertical_menu6.html">HTML+CSSで立体カラフル縦メニュー</a></li>
    <li><a href="/javascript/css_nav_horizontal_menu.html">HTML+CSSで横メニュー</a></li>
    <li><a href="/javascript/css_nav_horizontal_menu2.html">SVGアイコン配置の横メニュー</a></li>
    <li><a href="/javascript/css_nav_horizontal_sub_menu.html">HTML+CSSで横メニュー(サブ付)</a></li>
  </ul>
</nav>

<script>
  class TMamSideMenu{
    constructor(horizontalPos,menuWidth,burgerWH,vertBurgerPos){
      burgerWH=parseInt(burgerWH);
      if(isNaN(burgerWH)){burgerWH=48;}
      if(burgerWH<16){burgerWH=16;}
      this.bw=burgerWH;
      this.bh=burgerWH;
      let p=this.bh/20;
      let ww=4;
      if(horizontalPos=='right'){
        this.pos='right';
        this.shadow='-4px';
      }else{
        this.pos='left';
        this.shadow='4px';
      }
      if(menuWidth){
        this.w=menuWidth;
      }else{
        this.w='200px';
      }
      if(vertBurgerPos){
        this.bpos=vertBurgerPos;
      }else{
        this.bpos='4px';
      }
      this.isOpen=false;
      //スタイルシートの登録
      let style=document.createElement("style");
      document.head.appendChild(style);

      /*
        サイドメニューのCSS
        <div class=".mamSideMenu>
          <ul>
            <li><a>メニュー</a></li>
            <li><a>メニュー</a></li>
          </ul>
        </div>
      */
      //サイドメニューの大外の<div>のCSS
      style.sheet.insertRule(
        'nav.mamSideMenu{'+
          'position:fixed;top:0;bottom:6px;'+this.pos+':0;width:0;height:calc(100vh - 6px);overflow-x:hidden;overflow-y:hidden;'+
          'margin:0:padding:4px;box-sizing:border-box;display:block;background:#fff;box-shadow:'+this.shadow+' 4px 6px rgba(0,0,0,0.2);'+
          'z-index:2147483646;}'
      ,0);
      style.sheet.insertRule(
        'nav.mamSideMenu>ul{'+
          'list-style:none;margin:0;padding:'+(this.bh+8)+'px 0px 0px 0px;border:none;'+
          'border-radius:0px;background:none;width:'+this.w+';box-sizing:border-box;}'
      ,0);
      style.sheet.insertRule(
        'nav.mamSideMenu>ul>li{margin:0;padding:4px;border:none;width:100%;box-sizing:border-box;}'
      ,0);
      //サイドメニューの<a>タグのCSS
      style.sheet.insertRule(
        'nav.mamSideMenu>ul>li>a{margin:0;padding:4px 8px;width:100%;text-decoration:none;border-bottom:1px dotted #888;'+
        'display:block;box-sizing:border-box;font-size:calc('+this.w+' / 12);font-weight:bold;color:#333;text-shadow:0px 0px 0px rgba(0,0,0,0.3);}'
      ,0);
      style.sheet.insertRule(
        'nav.mamSideMenu>ul>li>a:active{text-shadow:2px 2px 2px rgba(0,0,255,0.3);box-shadow:2px 2px 2px rgba(0,0,0,0.3) inset;border-radius:4px;}'
      ,0);
      style.sheet.insertRule(
        'nav.mamSideMenu>ul>li>a:hover{box-shadow:2px 2px 2px rgba(0,0,0,0.3);border-radius:4px;}'
      ,0);
      style.sheet.insertRule(
        'nav.mamSideMenuOpen{animation:mamSideMenuOpenAni 0.3s linear 0.0s normal both running;}'
      ,0);
      style.sheet.insertRule(
        'nav.mamSideMenuClose{animation:mamSideMenuCloseAni 0.3s linear 0.0s normal both running;}'
      ,0);
      style.sheet.insertRule(
        '@keyframes mamSideMenuOpenAni{'+
        '  0%{width:0px;} 99%{width:'+this.w+';overflow-y:hidden;}'+
        '100%{width:'+this.w+';overflow-y:auto;}'+
        '}'
      ,0);
      style.sheet.insertRule(
        '@keyframes mamSideMenuCloseAni{0%{width:'+this.w+';overflow-y:hidden;} 100%{width:0px;}}'
      ,0);
      
      /*ハンバーガーボタンのCSS
        <div class="mamBurgerButton">
          <span>横棒</span>
          <span>横棒</span>
          <span>横棒</span>
          <span>open</span>
          <span>close</span>
        </div>
      */
      style.sheet.insertRule(
        'div.mamBurgerButton{'+
        '  position:fixed;width:'+this.bw+'px;height:'+this.bh+'px;background:#111;border-radius:8px;'+
        '  box-shadow:4px 4px 4px rgba(0,0,0,0.4);left:6px;top:6px;cursor:pointer;opacity:0.7;z-index:2147483647;'+
        '}'
      ,0);
      style.sheet.insertRule(
        'div.mamBurgerButton:active{box-shadow:-4px -4px 4px rgba(0,0,0,0.3);}'
      ,0);
      style.sheet.insertRule(
        'div.mamBurgerButton:hover{box-shadow:-2px -2px 2px rgba(0,0,0,0.3);}'
      ,0);
      style.sheet.insertRule(
        'div.mamBurgerButton>span{'+
          'display:inline-block;position:absolute;width:100%;text-align:center;transition:all 0.3s;'+
          'transform-origin:0% 50%;}'
      ,0);
      style.sheet.insertRule(
        'div.mamBurgerButton>span:nth-of-type(1){'+
          'width:'+(p*10)+'px;height:'+ww+'px;background:#fff;top:'+(p*2)+'px;left:'+p*5+'px;border-radius:'+ww/2+'px;}'
      ,0);
      style.sheet.insertRule(
        'div.mamBurgerButton>span:nth-of-type(2){'+
          'width:'+(p*10)+'px;height:'+ww+'px;background:#fff;top:'+(p*7)+'px;left:'+p*5+'px;border-radius:'+ww/2+'px;}'
      ,0);
      style.sheet.insertRule(
        'div.mamBurgerButton>span:nth-of-type(3){'+
          'width:'+(p*10)+'px;height:'+ww+'px;background:#fff;top:'+(p*12)+'px;left:'+p*5+'px;border-radius:'+ww/2+'px;}'
      ,0);
      style.sheet.insertRule(
        'div.mamBurgerButton>span:nth-of-type(4){bottom:0;left:0;right:0;font-size:'+p*3+'px;color:#fff;opacity:1;}'
      ,0);
      style.sheet.insertRule(
        'div.mamBurgerButton>span:nth-of-type(5){bottom:0;left:0;right:0;font-size:'+p*3+'px;color:#fff;opacity:0;}'
      ,0);
      style.sheet.insertRule(
        'div.mamBurgerClose>span:nth-of-type(1){transform:rotate( 45deg) scale(1.4,1.4);}'
      ,0);
      style.sheet.insertRule('div.mamBurgerClose>span:nth-of-type(2){opacity:0;}',0);
      style.sheet.insertRule(
        'div.mamBurgerClose>span:nth-of-type(3){transform:rotate(-45deg) scale(1.4,1.4);}'
      ,0);
      style.sheet.insertRule('div.mamBurgerClose>span:nth-of-type(4){opacity:0 !important;}',0);
      style.sheet.insertRule('div.mamBurgerClose>span:nth-of-type(5){opacity:1 !important;}',0);

      style.sheet.insertRule(
        'div.mamBurgerOpen>span:nth-of-type(1){transform:rotate( 0deg) scale(1,1);}'
      ,0);
      style.sheet.insertRule(
        'div.mamBurgerOpen>span:nth-of-type(2){opacity:1;}',0);
      style.sheet.insertRule(
        'div.mamBurgerOpen>span:nth-of-type(3){transform:rotate( 0deg) scale(1,1);}'
      ,0);
      style.sheet.insertRule(
        'div.mamBurgerOpen>span:nth-of-type(4){opacity:1 !important;}',0);
      style.sheet.insertRule(
        'div.mamBurgerOpen>span:nth-of-type(5){opacity:0 !important;}',0);

      //ハンバーガーボタン
      this.burger=document.createElement("div");
      this.burger.classList.add('mamBurgerButton');
      this.burger.innerHTML=
        '<span></span><span></span><span></span><span>Open</span><span>Close</span>';
      document.body.appendChild(this.burger);
      this.burger.style.top=this.bpos;
      if(this.pos=='left'){
        this.burger.style.left='6px';
      }else{
        let scrollbarWidth = window.innerWidth - document.body.clientWidth;
        this.burger.style.left='calc(100vw - '+burgerWH+'px - '+scrollbarWidth+'px)';
      }
      window.addEventListener("resize",function(){
        //右側配置の場合はスクロールバーに配慮する必要がある
        if(this.pos!='left'){
          let scrollbarWidth = window.innerWidth - document.body.clientWidth;
          this.burger.style.left='calc(100vw - '+burgerWH+'px - '+scrollbarWidth+'px)';
        }
      }.bind(this));
      //サイドメニューの開閉設定
      this.menu=document.querySelector('.mamSideMenu');
      if(this.menu){
        this.burger.addEventListener('click',function(){
          if(this.menu.classList.contains('mamSideMenuOpen')){
            this.menu.classList.remove('mamSideMenuOpen');
            this.menu.classList.add('mamSideMenuClose');
            this.burger.classList.remove('mamBurgerClose');
            this.burger.classList.add('mamBurgerOpen');
            this.isOpen=false;
          }else{
            this.menu.classList.remove('mamSideMenuClose');
            this.menu.classList.add('mamSideMenuOpen');
            this.burger.classList.remove('mamBurgerOpen');
            this.burger.classList.add('mamBurgerClose');
            this.isOpen=true;
          }
        }.bind(this));
      }
      //ハンバーガー又はサイドメニュー以外がクリックされたらサイドメニューを閉じる処理
      if(this.menu){
        document.addEventListener('click',function(){
          if(!event.target.closest('div.mamBurgerButton')&&!event.target.closest('nav.mamSideMenu')){
            if(this.isOpen){
              this.menu.classList.remove('mamSideMenuOpen');
              this.menu.classList.add('mamSideMenuClose');
              this.burger.classList.remove('mamBurgerClose');
              this.burger.classList.add('mamBurgerOpen');
              this.isOpen=false;
            }
          }
        }.bind(this));
      }
    }
  }
  window.addEventListener('DOMContentLoaded',function(){
    //引数
    //  メニューとバーガーの位置('left' 又は 'right'),
    //  メニューの幅('200px' など),
    //  ハンバーガーボタンの幅をピクセル単位で指定する(48 など),
    MamSideMenu=new TMamSideMenu('left','200px',48);
  });
</script>
縦並び・横並びメニューのサンプル一覧
