Sliding Hamburger Accordion Menu With jQuery And CSS3

Sliding Hamburger Accordion Menu With jQuery And CSS3

A fancy jQuery & CSS powered hamburger navigation that reveals a vertical accordion menu sliding from the edge of the screen when activated.

1. Create the accordion menu from nested HTML lists and then insert them together with the hamburger button to the main container.

<div id="menu-container">
  <!-- Hamburger Button -->
  <div id="menu-wrapper">
    <div id="hamburger-menu">
      <span></span>
      <span></span>
      <span></span>
    </div>
  </div>
  <!-- Accordion Menu -->
  <ul class="menu-list accordion">
    <li id="nav1" class="toggle accordion-toggle"> 
       <span class="icon-plus"></span>
       <a class="menu-link" href="#">Menu 1</a>
    </li>
    <ul class="menu-submenu accordion-content">
       <li><a class="head" href="#">Submenu 1</a></li>
       <li><a class="head" href="#">Submenu 2</a></li>
       <li><a class="head" href="#">Submenu 3</a></li>
    </ul>
    <li id="nav2" class="toggle accordion-toggle"> 
       <span class="icon-plus"></span>
       <a class="menu-link" href="#">Menu 2</a>
    </li>
    <ul class="menu-submenu accordion-content">
       <li><a class="head" href="#">Submenu 1</a></li>
       <li><a class="head" href="#">Submenu 2</a></li>
    </ul>
  </ul>
  
</div>

2. The necessary CSS styles for the hamburger button.

#menu-wrapper {
  overflow: hidden;
  max-width: 100%;
  cursor: pointer;
}
#menu-wrapper #hamburger-menu {
  position: relative;
  width: 25px;
  height: 20px;
  margin: 15px;
}
#menu-wrapper #hamburger-menu span {
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  left: 0;
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 10px;
  color: black;
  background-color: white;
  position: absolute;
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .4s ease-in-out;
  transition: .4s ease-in-out;
}
#menu-wrapper #hamburger-menu span:nth-child(1) {
  top: 0;
}
#menu-wrapper #hamburger-menu span:nth-child(2) {
  top: 9px;
}
#menu-wrapper #hamburger-menu span:nth-child(3) {
  top: 18px;
}
#menu-wrapper #hamburger-menu.open span:nth-child(1) {
  top: 9px;
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
}
#menu-wrapper #hamburger-menu.open span:nth-child(2) {
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  left: -60px;
}
#menu-wrapper #hamburger-menu.open span:nth-child(3) {
  top: 9px;
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

3. The necessary CSS styles for the accordion menu.

#menu-container .menu-list .menu-submenu {
  padding-top: 20px;
  padding-bottom: 20px;
}
#menu-container .menu-list {
  padding-left: 0;
  display: block;
  position: absolute;
  width: 100%;
  max-width: 450px;
  background: white;
  box-shadow: rgba(100,100,100,0.2) 6px 2px 10px;
  z-index: 999;
  overflow-y: auto;
  overflow-x: hidden;
  left: -100%;
}
#menu-container .menu-list li.accordion-toggle, #menu-container .menu-list .menu-login {
  font-size: 16px;
  padding: 20px;
  text-transform: uppercase;
  border-top: 1px solid #dbdcd2;
}
#menu-container .menu-list li:first-of-type {
  border-top: 0;
}
.accordion-toggle, .accordion-content {
  cursor: pointer;
  font-size: 16px;
  position: relative;
  letter-spacing: 1px;
}
.accordion-content {
  display: none;
}
.accordion-toggle a:before, .accordion-toggle a:after {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  right: 30px;
  width: 15px;
  height: 2px;
  margin-top: -1px;
  background-color: #5a5858;
  -webkit-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  -webkit-transition: all 0.3s;
  transition: all 0.3s ease-out;
}
.accordion-toggle a:before {
  -webkit-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  transform: rotate(-90deg);
  opacity: 1;
  z-index: 2;
}
.accordion-toggle.active-tab {
  background: yellowgreen;
  transition: all 0.3s ease;
}
.accordion-toggle a.active:before {
  -webkit-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
  background: #fff !important;
}
.accordion-toggle a.active:after {
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
  background: #fff !important;
  opacity: 0;
}

4. The JavaScript to toggle CSS classes using jQuery. Insert the following JavaScript snippets after loading jQuery library and done.

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" crossorigin="anonymous"></script>
$(function() {
  function slideMenu() {
    var activeState = $("#menu-container .menu-list").hasClass("active");
    $("#menu-container .menu-list").animate({left: activeState ? "0%" : "-100%"}, 400);
  }
  $("#menu-wrapper").click(function(event) {
    event.stopPropagation();
    $("#hamburger-menu").toggleClass("open");
    $("#menu-container .menu-list").toggleClass("active");
    slideMenu();
    $("body").toggleClass("overflow-hidden");
  });
  $(".menu-list").find(".accordion-toggle").click(function() {
    $(this).next().toggleClass("open").slideToggle("fast");
    $(this).toggleClass("active-tab").find(".menu-link").toggleClass("active");
    $(".menu-list .accordion-content").not($(this).next()).slideUp("fast").removeClass("open");
    $(".menu-list .accordion-toggle").not(jQuery(this)).removeClass("active-tab").find(".menu-link").removeClass("active");
  });
});

This awesome jQuery plugin is developed by slyka85. For more Advanced Usages, please check the demo page or visit the official website.

  • Publication date: 12.12.2018
  • Source