▲TOPへ戻る

【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");
    });
Point1
JavaScriptのクリックイベントでクラスactiveを追加、削除させる

上記JavaScriptのコードを参照

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

Point2
transform-originで回転する位置を変える
 .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%;      //←  ポイント
  }
transform-originの指定なし
transform-origin: 0% 50%;
Point3
ナビゲーションバーを画面左に隠しておき、クラスacitiveが追加されたら、ナビゲーションバーを表示させる
Point4
MenuBtnをrotateで、さらに回転させる
 .MenuBtn.active{
      transform: rotate(720deg);
  }

こんな記事も読まれています。

profile

gaoさん

パソコン好きなガオ

コロナ禍によるステイホームを機にプログラミングを学ぶ。パソコンに関してはプロではないが、ちょっと詳しい程度。<