Minimal Hamburger Overlay Navigation Drawer In CSS


Author: rosgas
Views Total: 3,438 views
Official Page: Go to website
Last Update: September 1, 2020
License: MIT

Preview:

Minimal Hamburger Overlay Navigation Drawer In CSS

Description:

A minimal, responsive, CSS only navigation drawer (sidebar menu) that slides out from the left side of the screen and covers part of your main content when you click the hamburger button.

How to use it:

1. Code the HTML for the navigation drawer.

<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="#">CSS</a></li>
        <li><a href="#">Script</a></li>
        <li><a href="#">Com</a></li>
      </ul>
    </div>
  </div>
</div>

2. Download the package and then insert the stylesheet menu.css in the document. That’s it.

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

3. Override 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 also  Versatile Radial Menu In Pure CSS - radialMenu.css

Leave a Reply

Your email address will not be published. Required fields are marked *