hamburger menu basic template

In this example below you will see how to do a hamburger menu basic template with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by codesnack, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright codesnack ©
  • HTML
  • CSS
  • JavaScript
    <button>open/close</button>

<nav class="menu">
  <a href="">Hola mundo!</a>
  <a href="">Hola mundo!</a>
  <a href="">Hola mundo!</a>
  <a href="">Hola mundo!</a>
  <a href="">Hola mundo!</a>
</nav>

/*Downloaded from https://www.codeseek.co/codesnack/hamburger-menu-basic-template-PprVZG */
    .menu {
  max-height: 0;
  overflow: hidden;
  transition: .3s ease all;
  background: #222;
}
.menu a {
  display: block;
}


/*Downloaded from https://www.codeseek.co/codesnack/hamburger-menu-basic-template-PprVZG */
    var boton = document.querySelector("button");
var menu = document.querySelector("nav.menu");
var counter = 0;

boton.addEventListener("click", function(){
  if (counter === 0) {
      menu.style["max-height"] = "100px";
      counter = 1;
  } else {
    menu.style["max-height"] = 0;
    counter = 0;
  }
});

Comments