Press "Enter" to skip to content

Responsive Overlay Side Menu With Pure HTML and CSS | hamburger-overlay-menu

Hamburger Overlay Menu – 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.

How to make use of it:

1. Code the HTML for the navigation drawer.

2. Download the package deal after which insert the stylesheet menu.css within the doc. That’s it.

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;
}

Minimal Hamburger Overlay Navigation In CSS, Pure CSS Hamburger Menu, Hamburger Menu Without Javascript


See Demo And Download

Official Website(rosgas): Click Here

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

Be First to Comment

    Leave a Reply

    Your email address will not be published.