Minimal Hamburger Overlay Navigation Drawer In CSS

Category: CSS & CSS3 , Menu & Navigation | September 1, 2020
Author: rosgas
Views Total: 625 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;
}

You Might Be Interested In:


Leave a Reply