A pure CSS open menu effect that turns a hamburger toggle button into a full-screen navigation menu with CSS3 transitions and transitions.

hamburger menu js codepen, hamburger menu css, hamburger menu in html, responsive hamburger menu javascript, hamburger menu example

Responsive Animated 3D Hamburger Menu with CSS/CSS3

How to make use of it:

1. Wrap the menu items and toggle button in a label item like this:

<label>
  <input type="checkbox">
  <span class="menu">
    <span class="hamburger"></span>
  </span>
  <ul>
    <li>
      <a href="#">Home</a>
    </li>
    <li>
      <a href="#">About</a>
    </li>
    <li>
      <a href="#">Contact</a>
    </li>
  </ul>
</label>

2. The hamburger menu switches patterns.

label .hamburger {
  position: absolute;
  top: 135px;
  left: 50px;
  width: 30px;
  height: 2px;
  background: #000;
  display: block;
  -webkit-transform-origin: center;
  transform-origin: center;
  -webkit-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
}
label .hamburger:after, label .hamburger:before {
  -webkit-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  background: #000;
}
label .hamburger:before { top: -10px; }
label .hamburger:after { bottom: -10px; }
label input { display: none; }
label input:checked + .menu {
  box-shadow: 0 0 0 100vw #FFF, 0 0 0 100vh #FFF;
  border-radius: 0;
}
label input:checked + .menu .hamburger {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
label input:checked + .menu .hamburger:after {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  bottom: 0;
}
label input:checked + .menu .hamburger:before {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  top: 0;
}
label input:checked + .menu + ul { opacity: 1; }

3. Design a full-screen navigation menu.

label .menu {
  position: absolute;
  right: -100px;
  top: -100px;
  z-index: 100;
  width: 200px;
  height: 200px;
  background: #FFF;
  border-radius: 50% 50% 50% 50%;
  -webkit-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  box-shadow: 0 0 0 0 #FFF, 0 0 0 0 #FFF;
  cursor: pointer;
}
label ul {
  z-index: 200;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  opacity: 0;
  -webkit-transition: .25s 0s ease-in-out;
  transition: .25s 0s ease-in-out;
}
label a {
  margin-bottom: 1em;
  display: block;
  color: #000;
  text-decoration: none;
}

Morphing Fullscreen Hamburger Menu, Open menu effect Plugin/Github

See Demo And Download

Official Website(havardob): Click Here

This superior jQuery/javascript plugin is developed by havardob. For extra Advanced Usage, please go to the official website.