【JacvaScript】【CSS】たった4行のJavaScriptで作るハンバーガーメニュー　作り方

三本線をクリック！

HTML

 <div class="Hbg">
    <a class="MenuBtn" id="MenuBtn">
        <div></div>
        <div></div>
        <div></div>
    </a>
    <div id="nav">
        <ul>
            <li><a href="">menu1</a></li>
            <li><a href="">menu2</a></li>
            <li><a href="">menu3</a></li>
        </ul>
    </div>
  </div>

CSS

 .Hbg{
    position: absolute;
  }
  .Hbg a{
      border: none;
  }
  .MenuBtn {
      display: block;
      height: 60px;
      width: 60px;
      position: absolute;
      top: 0;
      left: 0;
      padding: 0;
      z-index: 5;
  }
  .MenuBtn div {
      height: 4px;
      width: 60%;
      background-color:black;
      position: absolute;
      border-radius: 5px;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      transition: 0.3s;
  }
  .MenuBtn div:nth-of-type(1) {
      transform: translate(-50%, -17px);
  }
  .MenuBtn div:nth-of-type(3) {
      transform: translate(-50%, 14px);
  }
  .MenuBtn.active div:nth-of-type(1) {
      transform: rotate(45deg) translate(-50%, 0px);
      transform-origin: 0% 50%;
      background: #fff;
    }
  .MenuBtn.active div:nth-of-type(2) {
    opacity: 0;
  }
  .MenuBtn.active div:nth-of-type(3) {
      transform: rotate(-45deg) translate(-50%, 0px);
      transform-origin: 0% 50%;
      background: #fff;
  }
  .MenuBtn.active{
      transform: rotate(720deg);
  }
  #nav {
      width: 150px;
      height: 300px;
      padding: 20px 20px 20px 80px;
      position: absolute;
      background: rgb(12, 12, 80);
      opacity: 0;
      transform: translateX(-100%);
      transition: .3s ease-in-out;
  }
  #nav ul{
      position: absolute;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 0;
      top: 0;
      left: 0;
  }
  #nav ul li{
      padding: 10px 0;
  }
  #nav ul li a{
      color: white;
      font-size: 25px;
  }
  #nav.active {
      opacity: 1;
      position: absolute;
      transform: translateX(0%);
      z-index: 1;
  } 

JavaScript

 document.getElementById("MenuBtn").addEventListener("click", function(){
        this.classList.toggle("active");
        document.getElementById("nav").classList.toggle("active");
    });

上記JavaScriptのコードを参照

三本線をクリックしたら、MenuBtnとnavにクラスを追加し、三本線をアニメーションさせ、ナビゲーションバーを表示させる。

 .MenuBtn div {       //三本線の共通CSS
      height: 4px;
      width: 60%;
      background-color:black;
      position: absolute;
      border-radius: 5px;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      transition: 0.3s;
  }
  .MenuBtn div:nth-of-type(1) {          //一番目のdiv
      transform: translate(-50%, -17px);   
  }
 .MenuBtn div:nth-of-type(3) {      //三番目のdiv
      transform: translate(-50%, 14px);    
  }
 .MenuBtn.active div:nth-of-type(1) {       //一番目のdivは45度回転
      transform: rotate(45deg) translate(-50%, 0px);
      transform-origin: 0% 50%;      //←  ポイント
    }
 .MenuBtn.active div:nth-of-type(2) {   //二番目のdivは消える
      opacity: 0;                            
  }
 .MenuBtn.active div:nth-of-type(3) {    //三番目のdivは-45度回転
      transform: rotate(-45deg) translate(-50%, 0px);
      transform-origin: 0% 50%;      //←  ポイント
  }

 .MenuBtn.active{
      transform: rotate(720deg);
  }