How do I hover to change the hamburger menu colour, click the hamburger menu to transform it to x and have the contents dropdown?

Question

I am an amateur at coding and I am trying to code for my own website. How do I create a hamburger icon that changes to gold upon hovering and transforms into an X with dropdown contents after clicking?

The following is my code for a hamburger menu that transforms into an X:

function transformmenubar(x) {
  x.classList.toggle("change");
}

.menu-bar{
  display: inline-block;
  cursor: pointer;
}

.bar1, .bar2, .bar3 {
  width: 15px;
  height: 2px;
  background-color: #000000;
  margin: 3px 0;
  transition: 0.4s;
}


.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-3px, 3.5px);
  transform: rotate(-45deg) translate(-3px, 3.5px);
}

.change .bar2 {opacity: 0;}

.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-3px, -4.5px);
  transform: rotate(45deg) translate(-3px, -4.5px);
}

<div class="menu-bar"  onclick="transformmenubar(this)"  =>
  <div class="bar1"></div>
  <div class="bar2"></div>
  <div class="bar3"></div>
</div>

The following is the code for my dropdown content:

.dropdown-content {
  height: 100%;
  width: 200px;
  position: fixed;
  z-index: 1;
  display: none;
  overflow-x: hidden;
  margin-top: 50px;
  padding-top: 20px; 
}

.dropdown-content a {
  padding: 6px 8px 6px 16px;
  padding-left: 10px;
  text-decoration: none;
  font-size: 15px;
  color: #000000;
  display: block;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  outline: none;
  font-family: Arial Rounded MT Bold;
}

.dropdown-content a:hover {color: #C5B358;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover {color: #C5B358;}

 <div class="dropdown-content">
      <a href="#">HOME</a>
      <a href="#">SHOP</a>
      <a href="#">CATALOGUE</a>
      <a href="#">THE COMPANY</a>
      <a href="#">CONTACT US</a>
      <a href="#">FAQ</a>
 </div>

How do I combine my code together to make it work?

Here are the sample pictures of how I want my code to look like:

enter image description here

s.kuznetsov · Accepted Answer · 2021-01-13T09:40:49.403

Look. Here is a solution from me.

Firstly, as a coding lover, I advise you NOT to declare javascript events inside html structure tags:

onclick="transformmenubar(this)"

This will entail many disadvantages. Write all the logic in custom javascript files - .js, or inside the <script>...</script> tags.

I rewrote your javascript code, adding a toggle side to display the menu itself:

menu.classList.toggle("menu_change");

Also, the left rule is responsible for the absence and appearance of the menu for animation. I delete the display: none:

.dropdown-content {
  ...
  left: -100%;
  ...
  transition: 1s;
}

And a class for displaying a menu that adds/removes a toggle() method in javasript logic:

.dropdown-content.menu_change {
  left: 0;
}

To change the color of the bars of the menu button, add this rule from the :hover to your css:

.menu-bar:hover div {
  background-color: yellow;
}

Run this snippet and see how it works.

If you have any questions, please let me know. I will answer with pleasure.

let x = document.querySelector('.menu-bar');
let menu = document.querySelector('.dropdown-content');

x.onclick = function() {
  this.classList.toggle("change");
  menu.classList.toggle("menu_change");
}

.dropdown-content {
  height: 100%;
  width: 200px;
  position: fixed;
  z-index: 1;
  left: -100%;
  overflow-x: hidden;
  margin-top: 50px;
  padding-top: 20px;
  transition: 1s;
}

.dropdown-content.menu_change {
  left: 0;
}

.dropdown-content a {
  padding: 6px 8px 6px 16px;
  padding-left: 10px;
  text-decoration: none;
  font-size: 15px;
  color: #000000;
  display: block;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  outline: none;
  font-family: Arial Rounded MT Bold;
}

.dropdown-content a:hover {color: #C5B358;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover {color: #C5B358;}

.menu-bar{
  display: inline-block;
  cursor: pointer;
}

.menu-bar:hover div {
  background-color: yellow;
}

.bar1, .bar2, .bar3 {
  width: 15px;
  height: 2px;
  background-color: #000000;
  margin: 3px 0;
  transition: 0.4s;
}


.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-3px, 3.5px);
  transform: rotate(-45deg) translate(-3px, 3.5px);
}

.change .bar2 {opacity: 0;}

.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-3px, -4.5px);
  transform: rotate(45deg) translate(-3px, -4.5px);
}

<div class="menu-bar">
  <div class="bar1"></div>
  <div class="bar2"></div>
  <div class="bar3"></div>
</div>

<div class="dropdown-content">
  <a href="#">HOME</a>
  <a href="#">SHOP</a>
  <a href="#">CATALOGUE</a>
  <a href="#">THE COMPANY</a>
  <a href="#">CONTACT US</a>
  <a href="#">FAQ</a>
</div>

Thank you so much for your help. Really appreciate it. How can I make it in such a way that when I hover onto the hamburger menu and cross button, it changes to gold? — gnit, Jan 13 '21 at 09:26
I have updated my answer. Check it out. I set the mouse over to yellow. But you can define the desired color yourself and insert it here - `.menu-bar:hover div { background-color: yellow; }` — s.kuznetsov, Jan 13 '21 at 09:33
No problem. Always happy to help. And remember, never declare js events inside tags - that's bad. Happy coding. — s.kuznetsov, Jan 13 '21 at 09:38

How do I hover to change the hamburger menu colour, click the hamburger menu to transform it to x and have the contents dropdown?

1 Answers1