Zenn
Open1

コンポーネントライブラリ

CSS
HTML
JavaScript
Azurite0901Azurite0901

ハンバーガーメニューのアイコン部分

こいつをアニメーションさせてこうするための個人的コンポーネントライブラリです。ご自由にお使いください。

jsではbtnにクラスをトグルさせるだけなので書きません

<div class="toggleBtn">
         <span></span>
         <span></span>
         <span></span>
</div>

.toggleBtn {
   position: fixed;
   top: 10px;
   right: 10px;
   z-index: 999;
   background: #666;
   cursor: pointer;
   width: 50px;
   height: 50px;
   border-radius: 5px;
   opacity: 0.7;
}

.toggleBtn span {
   display: block;
   transition: all 0.4s;
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
   height: 3px;
   border-radius: 2px;
   background-color: #fff;
   width: 45%;

   &:nth-of-type(1) {
      top: 13px;
   }
   &:nth-of-type(2) {
      top: 23px;
      /* 50pxの約半分 +高さ3pxでいい感じになる */
   }
   &:nth-of-type(3) {
      top: 33px;
   }
}

.toggleBtn.btnActive span {
   &:nth-of-type(1) {
      top: 23px;
      transform: translateX(-50%) rotate(45deg);
   }
   &:nth-of-type(2) {
      top: 23px;
      opacity: 0;
   }
   &:nth-of-type(3) {
      top: 23px;
      transform: translateX(-50%) rotate(-45deg);
   }
}

transform: translateX(-50%) rotate(XXXdeg);と
transform: rotate(XXXdeg) translateX(-50%) ;
は違う動きをするので気を付けてください