Burger Menu - classes updated

by davidxmartins

HTML

<div class="small-header">
<div id="small-menu" class="small-menu-icon" onclick="changeIcon(this)">
  <div class="small-bar1"></div>
  <div class="small-bar2"></div>
  <div class="small-bar3"></div>
</div>
</div>

<div id="small-nav" class="small-overlay">
  <ul>
    <li> <a href="#">Home</a></li>
    <li> <a href="#">Services</a></li>
    <li> <a href="#">Products</a></li>
    <li> <a href="#">About</a></li>
    <li> <a href="#">Contact</a></li>
  </ul>
</div>

<h3>
Version .03
</h3>
<h1>
Burger menu sliding left over content. Icon inside header!
</h1>

CSS

/* SMALL MENU BUTTON */
.small-header {
  background: #aaa;
  height: 50px;
  position: relative;
  background: #aaa;
  top: 0;
}

.small-menu-icon {
  display: inline-block;
  cursor: pointer;
  position: absolute;
  right: 0;
  z-index: 999;
  padding: 5px;
}

.small-bar1,
.small-bar2,
.small-bar3 {
  width: 35px;
  height: 5px;
  background-color: #333;
  margin: 6px 0;
  transition: 0.4s;
}

.small-change .small-bar1 {
  transform: translate(0, 11px) rotate(-45deg);
  background-color: white;
}

.small-change .small-bar2 {
  opacity: 0;
  background-color: white;
}

.small-change .small-bar3 {
  transform: translate(0, -11px) rotate(45deg);
  background-color: white;
}



/* SMALL NAV ITEMS */
.small-overlay {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  right: 0;
  background-color: black;
  overflow-x: hidden;
  transition: 0.5s;
  display: flex;
  justify-items: center;
}

.small-overlay ul {
  list-style: none;
  padding: 20px 7vw;
  position: relative;
  top: 0;
  width: 100%;
  text-align: left;
  margin-top: 30px;
}

.small-overlay li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.small-overlay a {
  display: block;
  padding: 2vh 8px;
  text-decoration: none;
  font-size: 36px;
  color: #fff;
  transition: 0.2s;
  text-transform: lowercase;
}

.small-overlay a:hover,
.small-overlay a:focus {
  color: #aaa;
}



/* NOT RELEVANT - IGNORE */
html {
  height: 100%;
  font-family: sans-serif;
  font-size: clamp(25px, 2vw, 2vw);
  color: #aaa;
}

JavaScript

/*jslint browser: true*/
/*global $, jQuery*/
$('#small-menu').click(function() {
  if ($(this).hasClass('active')) {
    $(this).toggleClass('active');
    closeNav();

  } else {
    $(this).toggleClass('active');
    openNav();
  }
});

function changeIcon(x) {
  x.classList.toggle("small-change");
  let state = x.getAttribute('state');
  if (state == 'opened') {
    closeNav();
  } else {
    openNav();
  }
  // console.log(state);
}

function openNav() {
  document.getElementById("small-nav").style.width = "100%";
  document.getElementById('small-menu').setAttribute('state', 'opened');
}

function closeNav() {
  document.getElementById("small-nav").style.width = "0%";
  document.getElementById('small-menu').setAttribute('state', 'closed');
}