Hamburger Overlay Menu is a minimal, responsive, CSS-only navigation drawer (sidebar menu) that slides out from the left aspect of the display screen and covers a part of your most important content material.

If you click on the hamburger button. Responsive overlay, side menu made with pure HTML and CSS.

Read More: Animated Sliding Hamburger Navbar With jQuery And CSS

How to make use of it:

1. Code the HTML for the navigation menu.

<div class="menu-wrap">
  <input type="checkbox" class="toggler">
  <div class="hamburger">
    <div></div>
  </div>
  <div class="menu">
    <div>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">My Work</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>
  </div>
</div>

2. Download the package after which insert the stylesheet menu.css.

<link rel="stylesheet" href="menu.css">

3. Add the default styles of the navigation drawer.

.menu {
  position: fixed;
  top: 0;
  left: 0;
  background: rgb(77, 58, 58, 0.8);
  height: 100vh;
  width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  opacity: 0;
  transition: all var(--menu-speed) ease;
}
.menu > div {
  position: relative;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  opacity: 0;
  transition: opacity 0.4s ease-in;
}
.menu ul {
  list-style: none;
}
.menu li {
  padding: 1rem 0;
}
.menu > div a {
  text-decoration: none;
  color: #fafafa;
  font-size: 1.5rem;
  opacity: 0;
  transition: opacity 1s ease-in;
}
.menu a:hover {
  color: rgb(230, 177, 177);
  transition: color 0.3s ease-in;
}

See Demo And Download