Morphing Mobile Hamburger Navigation With JavaScript And CSS3

Yet another morphing mobile navigation concept that expands the hamburger toggle button to a fullscreen navigation menu when toggled. Written in pure JavaScript and HTML/CSS.

How to use it:

The project uses Material Icons for the hamburger and close icons.

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Create the navigation toggle & close buttons.

<i id="burger" class="material-icons" onclick="burger()">menu</i>
<i id="quit" class="material-icons" onclick="quit()">clear</i>

Create the navigation menu.

<div id="links">
  <a href="">Home</a>
  <a href="">About</a>
  <a href="">Contact</a>
</div>

Style and position the toggle & close buttons.

#burger{
  position: fixed;
  right: 0;
  top: 0;
  color: white;
  background: linear-gradient(45deg, #9682C8 10%, #05BCC9);;
  font-size: 32px;
  padding: 16px 16px 32px 32px;
  border-radius: 0% 0% 0% 100%;
  transition: 1s;
  cursor: pointer;
}
#quit{
  position: fixed;
  top: 0;
  color: white;
  font-size: 32px;
  padding: 16px;
  display: none;
  cursor: pointer;
}

Style the navigation menu.

#links{
  display: none;
  flex-direction: column;
  width: 100vw;
  height: 50vh;
  padding: 25vh 0;
  justify-content: space-around;
}
#links a{
  text-align: center;
  text-decoration: none;
  color: white;
  font-size: 2em;
  font-family: 'Roboto';
  z-index: 10;
}

The JavaScript toggle the CSS styles when the navigation is opened and closed.

function burger(){
  var burger = document.getElementById('burger');
  var links = document.getElementById('links');
  var quit = document.getElementById('quit');
  burger.style.padding = '16px 16px 200vw 200vw';
  links.style.display = 'flex';
  quit.style.display = 'inline';
}
function quit(){
  var burger = document.getElementById('burger');
  var links = document.getElementById('links');
  var quit = document.getElementById('quit');
  burger.style.padding = '16px 16px 32px 32px';
  links.style.display = 'none';
  quit.style.display = 'none';
}