Full-screen Hamburger Open Menu Effect With Pure HTML/CSS

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

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.

Share