自分のメモ用の記事です。クリックすると×に変形します。
サンプル
See the Pen ハンバーガーボタン by keiichisawai (@sawakei) on CodePen.
HTML
<button class="c-buggerBtn" id="js-nav-btn">
<span class="c-buggerBtn__bar"></span>
<span class="c-buggerBtn__screen">MENU</span>
</button>CSS(Sass)
.c-buggerBtn {
all: unset;
aspect-ratio: 1/1;
cursor: pointer;
display: grid;
outline: revert;
place-items: center;
-webkit-tap-highlight-color: transparent;
width: 20px;
z-index: calc(infinity);
}
.c-buggerBtn__bar,
.c-buggerBtn::before,
.c-buggerBtn::after {
background-color: currentColor;
content: "";
display: block;
grid-area: 1/1;
height: 2px;
transition: transform 0.5s;
width: 100%;
}
.c-buggerBtn {
&::before {
transform: translateY(-7px);
}
&::after {
transform: translateY(7px);
}
}
.is-open {
.c-buggerBtn__bar {
transform: scale(0);
}
.c-buggerBtn {
&::before {
transform: translateY(0) rotate(45deg);
}
&::after {
transform: translateY(0) rotate(-45deg);
}
}
}
//スクリーンリーダー
.c-buggerBtn__screen {
border: 0;
clip: rect(0, 0, 0, 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
javaScript
const jsBody = document.querySelector('body');
const jsNavBtn = document.querySelector('#js-nav-btn');
jsNavBtn.addEventListener('click', () => {
jsBody.classList.toggle('is-open');
})
