toggle menu icon with pure CSS

toggle menu icon with pure CSS and vanila JS

by Ishank Dubey

HTML

<nav>
  <div class='menu-container'>
    <a href='#' id='parent-href'>
<span class='one'></span>
<span class='two'></span>
<span class='three'></span>  
</a>
  </div>
  <div class='item-container item-container-hidden'>
    <a href='#' id='' class='item'>About</a>
    <a href='#' id='' class='item'>Find</a>
  </div>
</nav>
<div class='image-container'><img width='100%' src='https://s3-us-west-1.amazonaws.com/sfdc-demo/realty/house08.jpg' alt='test'></div>

CSS

nav {
  height: 49px;
  background-color: blue;
  position: relative;
  z-index: 11;
}

.image-container {
  width: 100%;
}

.item {
  width: 100%;
}

a {
  display: block;
  width: 30px;
  height: 25px;
  padding: 12px 12px;
}

span {
  display: block;
  width: 100%;
  height: 3px;
  position: relative;
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
  background-color: #cc4e46;
}

span.one {
  top: 0;
}

span.two {
  top: 6px;
}

span.three {
  top: 12px;
}

.hide {
  display: none;
}

span.one.rotate {
  transform: rotate(-45deg);
  top: 11px;
}

span.three.rotate {
  transform: rotate(45deg);
  top: 8px;
}

.item-container {
  height: 100px;
  overflow: hidden;
  -webkit-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
  background-color: rgba(255, 255, 255, .5);
}

.item-container-hidden {
  height: 0;
  -webkit-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}

JavaScript

document.getElementById('parent-href').addEventListener('click', function(e) {
  document.getElementsByClassName('one')[0].classList.toggle('rotate');
  document.getElementsByClassName('three')[0].classList.toggle('rotate');
  document.getElementsByClassName('two')[0].classList.toggle('hide');
  document.getElementsByClassName('item-container')[0].classList.toggle('item-container-hidden');
});