Expanding Hamburger Sliding Menu With Pure CSS

CSS only Sliding Hamburger menu is an HTML/CSS slider navigation that expands the hamburger icon to the sidebar menu on the toggle.

hamburger menu css responsive, hamburger menu example, hamburger menu website, hamburger menu design

How to make use of it:

1. Create a hamburger menu and insert it with the checkbox-based menu operator into the container.

<span class="checkbox-container">
  <input class="checkbox-trigger" type="checkbox"  />
  <span class="menu-content">
      <ul>
        <li>Home</li>
        <li>About</li>
        <li>Contact</li>
      </ul>
    <span class="hamburger-menu"></span>
  </span>
</span>

2. Design the content of the menu in CSS.

.checkbox-container {
  display: block;
  float: left;
  width: 50px;
  height: 50px;
  position: relative;
  background: #182825;
}
.menu-content {
  display: flex;
  background: #182825;
  color: white;
  float: left;
}
.menu-content ul {
  display: block;
  padding-left: 0;
  padding-top: 1em;
  padding-bottom: 1em;
  margin: 0;
  width: 0px;
  height: 0px;
  overflow: hidden;
  transition: height 0.3s ease 0.7s, width 0.7s ease;
}
.menu-content ul li {
  list-style: none;
  padding-top: 1em;
  padding-bottom: 1em;
  cursor: pointer;
  transition: color 0.5s, background 0.5s;
}
.menu-content ul li:hover {
  color: #0CD6AD;
  background: #1E332F;
}

3. Hamburger trigger pattern:

.checkbox-trigger {
  opacity: 0;
  position: absolute;
  width: 50px;
  height: 50px;
  left: 0px;
  cursor: pointer;
  z-index: 5;
}
.hamburger-menu, .hamburger-menu::before, .hamburger-menu::after {
  display: block;
  position: absolute;
  background: white;
  width: 40px;
  height: 4px;
  margin: 1.3em 3em;
  transition: background 0.3s;
}
.hamburger-menu::before, .hamburger-menu::after {
  content: '';
  position: absolute;
  margin: -0.7em 0 0;
  transition: width 0.7s ease 0.3s, transform 0.7s ease 0.3s;
}
.hamburger-menu::after { margin-top: 0.7em; }
.hamburger-menu {
  position: relative;
  display: block;
  margin: 0;
  margin-top: 1.45em;
  margin-right: 0.35em;
  margin-left: 0.35em;
  margin-bottom: 1.45em;
  transition: width 0.3s ease;
}

4. Basic CSS hacks to toggle a hamburger menu with a checkbox.

.checkbox-trigger:checked { left: 202px; }
.checkbox-trigger:checked + .menu-content .hamburger-menu {
  width: 2em;
  transition: width 0.7s ease 0.7s;
}
.checkbox-trigger:checked + .menu-content .hamburger-menu::before {
  width: 1.2em;
  transform: rotate(-35deg);
  margin-top: -0.4em;
}
.checkbox-trigger:checked + .menu-content .hamburger-menu::after {
  width: 1.2em;
  transform: rotate(35deg);
  margin-top: 0.4em;
}
.checkbox-trigger:checked + .menu-content ul {
  width: 200px;
  height: 200px;
  transition: width 0.7s ease 0.3s, height 0.3s ease;
}

Expanding CSS only Sliding menu (Hamburger menu) Plugin/Github

See Demo And Download

Official Website(G_4s): Click Here

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

Tags: G_4shamburgerhamburger menuHamburger overlay menumenumobile menuslidingsliding menu