如何將類添加/切換到元素以將漢堡菜單切換為X以便再次關閉和返回

Question

我正在嘗試使用vanilla JavaScript將漢堡菜單切換為X然后再返回。 我想只使用vanilla js，而不是JQuery。

我已經包含了代碼，以顯示我已經嘗試過。 當我“打開”菜單時，我試圖讓'.open'類添加/切換。 但無濟於事。

這是我的代碼：

 const navToggle = document.getElementById('nav-toggle'); navToggle.addEventListener('click', () => { if (navToggle.classList) navToggle.classList.add('open'); else navToggle.className += ' ' + open; // navToggle.style.display('open'); }); 

 *, html { box-sizing: border-box; padding: 0; margin: 0; background-color: #333; -webkit-font-smoothing: antialiased; } img.logo-header { width: 10rem; height: 10rem; } .header-wrapper { border: 1px solid black; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; } .logo-header { grid-column: 1; } /* Navbar */ .nav-header { grid-column: 2; display: flex; flex-direction: column; justify-content: space-around; align-items: center; } /* Navbar Hamburger Menu */ nav ul { margin: 0; padding: 0; list-style: none; } nav li { margin: 0 0 1em 1em; } nav a { text-decoration: none; font-size: 1.2rem; text-transform: uppercase; color: white; opacity: 0; transition: opacity 150ms ease-in-out; } nav a:hover { /* Change Color */ color: #000; } .nav-toggle:checked~nav { transform: scale(1, 1); } .nav-toggle:checked~nav a { opacity: 1; -webkit-transition: opacity 250ms ease-in-out 250ms; -o-transition: opacity 250ms ease-in-out 250ms; transition: opacity 250ms ease-in-out 250ms; } .nav-toggle { display: none; } .nav-toggle-label { position: absolute; top: 4em; right: 0; margin-right: 1em; height: auto; display: flex; align-items: center; } .nav-toggle-label span, .nav-toggle-label span::before, .nav-toggle-label span::after { display: block; background: white; height: .125em; width: 2.15em; border-radius: .125em; position: relative; } .nav-toggle-label span::before, .nav-toggle-label span::after { content: ''; position: absolute; } .nav-toggle-label span::before { bottom: .5em; } .nav-toggle-label span::after { top: .5em; } .open .nav-toggle { transform: rotate(45deg); } .open .nav-toggle::before { opacity: 0; } .open .nav-toggle::after { transform: translateY(-3px) rotate(-90deg); } 

 <div class="header-wrapper"> <img class="logo-header" src="./assets/img/logo.png" alt=""> <input type="checkbox" id="nav-toggle" class="nav-toggle"> <nav class="nav-header"> <ul> <li class="nav-item"><a href="">Ministries</a></li> <li class="nav-item"><a href="">About</a></li> <li class="nav-item"><a href="">Contact</a></li> <li class="nav-item"><a href="">Book</a></li> </ul> </nav> <label for="nav-toggle" class="nav-toggle-label"><span></span></label> </div> 

我希望漢堡包菜單消失並變成X，然后再次點擊再切換回漢堡包。 現在，所有發生的事情都是菜單出現並在點擊時消失，但沒有別的。 希望有一個從漢堡到X的過渡。沒什么特別的。

Answer 1

  const navToggle = document.getElementById('nav-toggle'); navToggle.addEventListener('click', () => { //This is a better way to toggle classes navToggle.classList.toggle('open') }); 

 *, html { box-sizing: border-box; padding: 0; margin: 0; background-color: #333; -webkit-font-smoothing: antialiased; } img.logo-header { width: 10rem; height: 10rem; } .header-wrapper { border: 1px solid black; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; } .logo-header { grid-column: 1; } /* Navbar */ .nav-header { grid-column: 2; display: flex; flex-direction: column; justify-content: space-around; align-items: center; } /* Navbar Hamburger Menu */ nav ul { margin: 0; padding: 0; list-style: none; } nav li { margin: 0 0 1em 1em; } nav a { text-decoration: none; font-size: 1.2rem; text-transform: uppercase; color: white; opacity: 0; transition: opacity 150ms ease-in-out; } nav a:hover { /* Change Color */ color: #000; } .nav-toggle:checked ~ nav { transform: scale(1, 1); } .nav-toggle:checked ~ nav a { opacity: 1; -webkit-transition: opacity 250ms ease-in-out 250ms; -o-transition: opacity 250ms ease-in-out 250ms; transition: opacity 250ms ease-in-out 250ms; } /* Make middle bar invisible */ .nav-toggle:checked ~ .nav-toggle-label > span { background-color: transparent; } /* Rotate and translate the top and bottom bar */ .nav-toggle:checked ~ .nav-toggle-label > span::before { transform: translateY(0.5em) rotate(45deg) } .nav-toggle:checked ~ .nav-toggle-label > span::after { transform: translateY(-0.5em) rotate(-45deg) } .nav-toggle { display: none; } /* Fixed height of the box so that it covers the whole switch/button */ .nav-toggle-label { position: absolute; top: 2.925em; right: 0; margin-right: 1em; height: 2.15em; display: flex; align-items: center; } /* Added transition */ .nav-toggle-label span, .nav-toggle-label span::before, .nav-toggle-label span::after { display: block; background: white; height: .125em; width: 2.15em; border-radius: .125em; position: relative; transition: transform 0.2s, background-color 0.2s; } .nav-toggle-label span::before, .nav-toggle-label span::after { content: ''; position: absolute; } .nav-toggle-label span::before { bottom: .5em; } .nav-toggle-label span::after { top: .5em; } .open .nav-toggle { transform: rotate(45deg); } .open .nav-toggle::before { opacity: 0; } .open .nav-toggle::after { transform: translateY(-3px) rotate(-90deg); } 

 <div class="header-wrapper"> <img class="logo-header" src="./assets/img/logo.png" alt=""> <input type="checkbox" id="nav-toggle" class="nav-toggle"> <nav class="nav-header"> <ul> <li class="nav-item"><a href="">Ministries</a></li> <li class="nav-item"><a href="">About</a></li> <li class="nav-item"><a href="">Contact</a></li> <li class="nav-item"><a href="">Book</a></li> </ul> </nav> <label for="nav-toggle" class="nav-toggle-label"><span></span></label> </div> 

干得好：

https://codepen.io/anon/pen/YMoEwX

通過使用transform: rotate() translateY()我將頂部和底部條形成為X，我也使中間條形圖不可見。

我還繼續修改了開關/按鈕和JavaScript的高度。