Saya mencoba membuat menu hamburger yang terbuka dan tertutup ketika ikon menu diklik. Ketika saya pertama kali membuka nav, warna latar belakang disesuaikan dengan lebar 100%, dan transisi/perubahan tiga baris menjadi "X". Namun, ketika saya mengklik "X" lagi untuk menutup nav, lebar latar belakang berubah menjadi 0%, tetapi ikonnya tidak berubah.

Saya mencoba menggunakan JavaScript untuk melakukan ini juga. Meskipun saya tidak yakin apa cara paling sederhana untuk mencapai fungsi menu hamburger.

Saat ini saya telah mencoba menggunakan fungsi onclick dan x.classList.toggle("change"); untuk mengubah ikon menu.

HTML

<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav(this)"></a>

</div>

  <span style="font-size:30px;cursor:pointer" onclick="openNav(this)">
 <div class="line1"></div>
<div class="line2"></div>
  <div class="line3"></div>
</span>

CSS

 body {
font-family: "Lato", sans-serif;
}

.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
 background-color: #111;
overflow-x: hidden;
transition: 0.5s;
 padding-top: 60px;
opacity:0.6;
}

.sidenav a {
 padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
 display: block;
 }

.sidenav a:hover {
 color: #f1f1f1;
 }

 .line1, .line2, .line3{
  width:35px;
 height:2px;
 background-color:black;
 margin:6px 0;
 transition:0.3s;
 }


 .change .line1 {
 -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-45deg) translate(-9px, 6px);
  -webkit-transition: 0.3s ease;
  }

.change .line2 {opacity: 0;}

 .change .line3 {
   -webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-7px, -2px);
    -webkit-transition: 0.3s ease;

 }

   @media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

JAVASCRIPT

   function openNav(x) {
  document.getElementById("mySidenav").style.width = "100%";
  x.classList.toggle("change");

  }


 function closeNav() {
 document.getElementById("mySidenav").style.width = "0";
 x.classList.toggle("change");
  }
0
tsharma 22 Oktober 2019, 18:16

1 menjawab

Jawaban Terbaik

Kesalahan Anda bahwa Anda menambahkan kelas ke burger dan menghapus kelas dari #mySidenav > a

Dalam contoh berikutnya saya menunjukkan bagaimana cara kerjanya.

HTML:

<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" style="background:red" onclick="closeNav()"></a>
</div>
<span id="burger" style="font-size:30px;cursor:pointer" onclick="openNav()">
  <div class="line1"></div>
  <div class="line2"></div>
  <div class="line3"></div>
</span>

JAVASCRIPT:

function openNav() {
    mySidenav.style.width = "100%";
    burger.classList.add("change");
}

function closeNav() {
    mySidenav.style.width = "0";
    burger.classList.remove("change");
}

// mySidenav == document.getElementById("mySidenav")
// burger == document.getElementById("burger ")

Contoh codepen

0
Vladyslav Levenets 22 Oktober 2019, 15:38