実現したいこと
ハンバーガーメニューをクリックすると3本の横線が×になる
動きを付けたい
発生している問題
クリックする前にactiveが付与され最初から×でクリックすると横3本になる。 アニメーションは思い通りだが動作が逆。
該当のソースコード
###html----------------------------------------------------------------------------
<header id="top" class="header" > <nav class="nav_burger nav" id="nav_burger"> <ul> <li><a href="#demo">demo</a></li> <li><a href="#bdemo">demo</a></li> <li><a href="#demo">demo</a></li> <li><a href="#demt"></a>demo</a></li> <li><a href="#demo">demo</a></li> </ul> </nav> <button class="burger active" id="burger"> <span></span> <span></span> <span></span> </button> <ul> <li><a href="#demo">demo</a></li> <li><a href="#demo">demo</a></li> <li><a href="#demo">demo</a></li> <li><a href="#demo">demo</a></li> </ul> </header>
###css---------------------------------------------------------------------------------------------------
body {
position: relative;
color: #FFF; /* RGB */ background-color: #000; font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif"; font-weight: 400; font-style: normal; line-height: 2.4rem; text-align: center; margin: 0; overflow-x: hidden;
}
ul li {
list-style: none;
}
a {
text-decoration: none;
color: #FFFFFF;
}
h2 {
font-size: 24px;
}
.header {
position: fixed;
width: 100%;
height: 55px;
background-color: #000;
z-index: 100;
}
.header ul {
display: none;
}
/humberger_background/
.nav_burger {
display: block;
position: fixed;
top: 0;
left: 0;
transform: translateX(100%);
background-color: #000;
height: 100%;
width: 100%;
transition: ease .4s;
/ハンバーガーメニュークリック時のナビゲーションメニュー出現を遅延/
}
.nav_burger ul {
display: block;
padding: 10% 0 0 0;
text-align: left;
font-size: 2rem;
font-weight: 600;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
color: #fff;
}
.nav_burger ul li {
padding: 6% 0 6% 12%;
font-size: 2rem;
font-weight: 600;
border-bottom: solid 4px #ffbf00;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.nav_burger ul li a {
color: #fff;
}
.burger {
display: block;
position: fixed;
background-color: #000;
height: 55px;
aspect-ratio: 1;
top: 0;
right: 0;
border: none;
cursor: pointer;
rotate: 0;
}
.burger span {
display: block;
position: relative;
height: 1px;
width: 100%;
background-color: #fff;
transition: ease .4s;
/*ハンバーガーメニュークリック時の三本線の動きを遅延*/
}
.burger span:nth-child(1) {
top: 0;
}
.burger span:nth-child(2) {
margin: 8px 0;
}
.burger span:nth-child(3) {
top: 0;
}
.nav_burger.active {
transform: translateX(0);
}
.burger.active span:nth-child(1) {
top: 10px;
transform: rotate(45deg);
}
.burger.active span:nth-child(2) {
opacity: 0;
}
.burger.active span:nth-child(3) {
top: -8px;
transform: rotate(-45deg);
}
@media (min-width:768px) {
.header { height: 64px; } .header ul { display: flex; font-size: 1.2rem; font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; position: absolute; width: 40%; justify-content: space-between; align-items: center; right: 28%; top: -5px; } .burger { display: none; } .nav_burger { display: none; }
}
###JavaScript--------------------------------------------------------------------------------------------
if (burger) {
burger.addEventListener('click', () => { //ハンバーガーメニューをクリックしたら
burger.classList.toggle('active'); // ハンバーガーメニューにactiveクラスを付け外し
nav.classList.toggle('active'); // ナビゲーションメニューにactiveクラスを付け外し
})
}
### 試したこと burger.addEventListener('click', function () { //ハンバーガーメニューをクリックしたら burger.classList.toggle('active'); // ハンバーガーメニューにactiveクラスを付け外し nav.classList.toggle('active'); // ナビゲーションメニューにactiveクラスを付け外し }); これでも治らず ### 補足情報(FW/ツールのバージョンなど) VisualStudioCode
0 コメント