/ Hamburger Menu

A nice Mobile Burger Menu

A nice Mobile Burger Menu

Mobile Burger Menu

A nice Mobile Burger Menu.

Made with

Html
Css
Javascript

Html

<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<i id="burger" class="material-icons" onclick="burger()">menu</i>
<i id="quit" class="material-icons" onclick="quit()">clear</i>
<div id="links">
    <a href="">Lorem</a>
    <a href="">Ispum</a>
    <a href="">TKT</a>
</div>

Css

body{padding: 0; margin: 0;}

#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;
}

#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;
}

Javascript

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';
}

Author

Kamil

Demo

See the Pen Mobile Burger Menu by Kamil (@Kmil) on CodePen.

CodeTea

A Nice collection of often useful examples done in HTML JavaScript CSS.

Read More