Create accordion menu with sidebar hamburger menu

DATE POSTED: 27/02/2019

In this post we will explain how to create the accordion menu with sidebar hamburger menu.

The Code

STEP 1: In the header of the page we refer to stylesheet . This reference was made with the <link> tag as follows:

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
      <source src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></source>
      <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
      <link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css?ver=1.1' type='text/css' media='all' />

STEP 2:You can add the following style code into your <head> tags.


@import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";
         body {
         font-family: 'Poppins', sans-serif;
         background: #fafafa;
         }
         p {
         font-family: 'Poppins', sans-serif;
         font-size: 1.1em;
         font-weight: 300;
         line-height: 1.7em;
         color: #999;
         }
         a,
         a:hover,
         a:focus {
         color: inherit;
         text-decoration: none;
         transition: all 0.3s;
         }
         #sidebarCollapse
         {
         position: fixed;
         z-index: 2;
         }
         .navbar {
         padding: 15px 10px;
         background: #fff;
         border: none;
         border-radius: 0;
         margin-bottom: 40px;
         box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
         }
         .navbar-btn {
         box-shadow: none;
         outline: none !important;
         border: none;
         }
         .line {
         width: 100%;
         height: 1px;
         border-bottom: 1px dashed #ddd;
         margin: 40px 0;
         }
         /* ---------------------------------------------------
         SIDEBAR STYLE
         ----------------------------------------------------- */
         #sidebar {
         width: 250px;
         position: fixed;
         top: 0;
         left: -250px;
         height: 100vh;
         z-index: 999;
         background: #3765a3;
         color: #fff;
         transition: all 0.3s;
         overflow-y: scroll;
         box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
         }
         #sidebar.active {
         left: 0;
         }
         #dismiss {
         width: 35px;
         height: 35px;
         line-height: 35px;
         text-align: center;
         background: #3765a3;
         position: absolute;
         top: 10px;
         right: 10px;
         cursor: pointer;
         -webkit-transition: all 0.3s;
         -o-transition: all 0.3s;
         transition: all 0.3s;
         }
         #dismiss:hover {
         background: #fff;
         color: #3765a3;
         }
         .overlay {
         display: none;
         position: fixed;
         width: 100vw;
         height: 100vh;
         background: rgba(0, 0, 0, 0.7);
         z-index: 998;
         opacity: 0;
         transition: all 0.5s ease-in-out;
         }
         .overlay.active {
         display: block;
         opacity: 1;
         }
         #sidebarmenu,
         #sidebarmenu ul,
         #sidebarmenu ul li,
         #sidebarmenu ul li a {
         margin: 0;
         padding: 0;
         border: 0;
         list-style: none;
         line-height: 1;
         display: block;
         position: relative;
         -webkit-box-sizing: border-box;
         -moz-box-sizing: border-box;
         box-sizing: border-box;
         }
         #sidebarmenu {
         width: 250px;
         font-family: Helvetica, Arial, sans-serif;
         color: #ffffff;
         }
         #sidebarmenu ul ul {
         display: none;
         }
         .align-right {
         float: right;
         }
         #sidebarmenu > ul > li > a {
         padding: 15px 20px;
         border-left: 1px solid #3765a3;
         border-right: 1px solid #3765a3;
         border-top: 1px solid #3765a3;
         cursor: pointer;
         z-index: 2;
         font-size: 14px;
         font-weight: bold;
         text-decoration: none;
         color: #ffffff;
         text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
         background: #3765a3;
         background: -webkit-linear-gradient(#3765a3, #3765a3);
         background: -moz-linear-gradient(#3765a3, #3765a3);
         background: -o-linear-gradient(#3765a3, #3765a3);
         background: -ms-linear-gradient(#3765a3, #3765a3);
         background: linear-gradient(#3765a3, #3765a3);
         box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
         }
         #sidebarmenu > ul > li > a:hover,
         #sidebarmenu > ul > li.active > a,
         #sidebarmenu > ul > li.open > a {
         color: #eeeeee;
         background: #3765a3;
         background: -webkit-linear-gradient(#3765a3, #3765a3);
         background: -moz-linear-gradient(#3765a3, #3765a3);
         background: -o-linear-gradient(#3765a3, #3765a3);
         background: -ms-linear-gradient(#3765a3, #3765a3);
         background: linear-gradient(#3765a3, #3765a3);
         }
         #sidebarmenu > ul > li.open > a {
         box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.15);
         border-bottom: 1px solid #3765a3;
         }
         #sidebarmenu > ul > li:last-child > a,
         #sidebarmenu > ul > li.last > a {
         border-bottom: 1px solid #3765a3;
         }
         .holder {
         width: 0;
         height: 0;
         position: absolute;
         top: 0;
         right: 0;
         }
         .holder::after,
         .holder::before {
         display: block;
         position: absolute;
         content: "";
         width: 6px;
         height: 6px;
         right: 20px;
         z-index: 10;
         -webkit-transform: rotate(-135deg);
         -moz-transform: rotate(-135deg);
         -ms-transform: rotate(-135deg);
         -o-transform: rotate(-135deg);
         transform: rotate(-135deg);
         }
         .holder::after {
         top: 17px;
         border-top: 2px solid #ffffff;
         border-left: 2px solid #ffffff;
         }
         #sidebarmenu > ul > li > a:hover > span::after,
         #sidebarmenu > ul > li.active > a > span::after,
         #sidebarmenu > ul > li.open > a > span::after {
         border-color: #eeeeee;
         }
         .holder::before {
         top: 18px;
         border-top: 2px solid;
         border-left: 2px solid;
         border-top-color: inherit;
         border-left-color: inherit;
         }
         #sidebarmenu ul ul li a {
         cursor: pointer;
         border-bottom: 1px solid #32373e;
         border-left: 1px solid #32373e;
         border-right: 1px solid #32373e;
         padding: 10px 20px;
         z-index: 1;
         text-decoration: none;
         font-size: 13px;
         color: #eeeeee;
         background: #49505a;
         box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
         }
         #sidebarmenu ul ul li:hover > a,
         #sidebarmenu ul ul li.open > a,
         #sidebarmenu ul ul li.active > a {
         background: #424852;
         color: #ffffff;
         }
         #sidebarmenu ul ul li:first-child > a {
         box-shadow: none;
         }
         #sidebarmenu ul ul ul li:first-child > a {
         box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
         }
         #sidebarmenu ul ul ul li a {
         padding-left: 30px;
         }
         #sidebarmenu > ul > li > ul > li:last-child > a,
         #sidebarmenu > ul > li > ul > li.last > a {
         border-bottom: 0;
         }
         #sidebarmenu > ul > li > ul > li.open:last-child > a,
         #sidebarmenu > ul > li > ul > li.last.open > a {
         border-bottom: 1px solid #32373e;
         }
         #sidebarmenu > ul > li > ul > li.open:last-child > ul > li:last-child > a {
         border-bottom: 0;
         }
         #sidebarmenu ul ul li.has-sub > a::after {
         display: block;
         position: absolute;
         content: "";
         width: 5px;
         height: 5px;
         right: 20px;
         z-index: 10;
         top: 11.5px;
         border-top: 2px solid #eeeeee;
         border-left: 2px solid #eeeeee;
         -webkit-transform: rotate(-135deg);
         -moz-transform: rotate(-135deg);
         -ms-transform: rotate(-135deg);
         -o-transform: rotate(-135deg);
         transform: rotate(-135deg);
         }
         #sidebarmenu ul ul li.active > a::after,
         #sidebarmenu ul ul li.open > a::after,
         #sidebarmenu ul ul li > a:hover::after {
         border-color: #ffffff;
         }

STEP 3 :You can add the following script code into your inside <head>.

 
        
         
         ( function( $ ) {
           $( document ).ready(function() {
           $('#sidebarmenu li.has-sub>a').on('click', function(){
               $(this).removeAttr('href');
               var element = $(this).parent('li');
               if (element.hasClass('open')) {
                 element.removeClass('open');
                 element.find('li').removeClass('open');
                 element.find('ul').slideUp();
               }
               else {
                 element.addClass('open');
                 element.children('ul').slideDown();
                 element.siblings('li').children('ul').slideUp();
                 element.siblings('li').removeClass('open');
                 element.siblings('li').find('li').removeClass('open');
                 element.siblings('li').find('ul').slideUp();
               }
             });
         
             $('#sidebarmenu>ul>li.has-sub>a').append('');
         
             (function getColor() {
               var r, g, b;
               var textColor = $('#sidebarmenu').css('color');
               textColor = textColor.slice(4);
               r = textColor.slice(0, textColor.indexOf(','));
               textColor = textColor.slice(textColor.indexOf(' ') + 1);
               g = textColor.slice(0, textColor.indexOf(','));
               textColor = textColor.slice(textColor.indexOf(' ') + 1);
               b = textColor.slice(0, textColor.indexOf(')'));
               var l = rgbToHsl(r, g, b);
               if (l > 0.7) {
                 $('#sidebarmenu>ul>li>a').css('text-shadow', '0 1px 1px rgba(0, 0, 0, .35)');
                 $('#sidebarmenu>ul>li>a>span').css('border-color', 'rgba(0, 0, 0, .35)');
               }
               else
               {
                 $('#sidebarmenu>ul>li>a').css('text-shadow', '0 1px 0 rgba(255, 255, 255, .35)');
                 $('#sidebarmenu>ul>li>a>span').css('border-color', 'rgba(255, 255, 255, .35)');
               }
             })();
         
           function rgbToHsl(r, g, b) {
               r /= 255, g /= 255, b /= 255;
               var max = Math.max(r, g, b), min = Math.min(r, g, b);
               var h, s, l = (max + min) / 2;
         
               if(max == min){
                   h = s = 0;
               }
               else {
                   var d = max - min;
                   s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
                   switch(max){
                       case r: h = (g - b) / d + (g 

         $(document).ready(function () {
             $("#sidebar").mCustomScrollbar({
                 theme: "minimal"
             });
         
             $('#dismiss, .overlay').on('click', function () {
                 $('#sidebar').removeClass('active');
                 $('.overlay').removeClass('active');
             });
         
             $('#sidebarCollapse').on('click', function () {
                 $('#sidebar').addClass('active');
                 $('.overlay').addClass('active');
                 $('.collapse.in').toggleClass('in');
                 $('a[aria-expanded=true]').attr('aria-expanded', 'false');
             });
         });
      

FINAL CODE:

<!DOCTYPE html>
<html>
   <head >
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <title>Sidebar using Bootstrap 4</title>
      <!-- Our Custom CSS -->
      <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
      <source src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></source>
      <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
      <link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css?ver=1.1' type='text/css' media='all' />
      <source type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js?ver=20141010'></source>
      <style type="text/css">
       @import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";
         body {
         font-family: 'Poppins', sans-serif;
         background: #fafafa;
         }
         p {
         font-family: 'Poppins', sans-serif;
         font-size: 1.1em;
         font-weight: 300;
         line-height: 1.7em;
         color: #999;
         }
         a,
         a:hover,
         a:focus {
         color: inherit;
         text-decoration: none;
         transition: all 0.3s;
         }
         #sidebarCollapse
         {
         position: fixed;
         z-index: 2;
         }
         .navbar {
         padding: 15px 10px;
         background: #fff;
         border: none;
         border-radius: 0;
         margin-bottom: 40px;
         box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
         }
         .navbar-btn {
         box-shadow: none;
         outline: none !important;
         border: none;
         }
         .line {
         width: 100%;
         height: 1px;
         border-bottom: 1px dashed #ddd;
         margin: 40px 0;
         }
         /* ---------------------------------------------------
         SIDEBAR STYLE
         ----------------------------------------------------- */
         #sidebar {
         width: 250px;
         position: fixed;
         top: 0;
         left: -250px;
         height: 100vh;
         z-index: 999;
         background: #3765a3;
         color: #fff;
         transition: all 0.3s;
         overflow-y: scroll;
         box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
         }
         #sidebar.active {
         left: 0;
         }
         #dismiss {
         width: 35px;
         height: 35px;
         line-height: 35px;
         text-align: center;
         background: #3765a3;
         position: absolute;
         top: 10px;
         right: 10px;
         cursor: pointer;
         -webkit-transition: all 0.3s;
         -o-transition: all 0.3s;
         transition: all 0.3s;
         }
         #dismiss:hover {
         background: #fff;
         color: #3765a3;
         }
         .overlay {
         display: none;
         position: fixed;
         width: 100vw;
         height: 100vh;
         background: rgba(0, 0, 0, 0.7);
         z-index: 998;
         opacity: 0;
         transition: all 0.5s ease-in-out;
         }
         .overlay.active {
         display: block;
         opacity: 1;
         }
         #sidebarmenu,
         #sidebarmenu ul,
         #sidebarmenu ul li,
         #sidebarmenu ul li a {
         margin: 0;
         padding: 0;
         border: 0;
         list-style: none;
         line-height: 1;
         display: block;
         position: relative;
         -webkit-box-sizing: border-box;
         -moz-box-sizing: border-box;
         box-sizing: border-box;
         }
         #sidebarmenu {
         width: 250px;
         font-family: Helvetica, Arial, sans-serif;
         color: #ffffff;
         }
         #sidebarmenu ul ul {
         display: none;
         }
         .align-right {
         float: right;
         }
         #sidebarmenu > ul > li > a {
         padding: 15px 20px;
         border-left: 1px solid #3765a3;
         border-right: 1px solid #3765a3;
         border-top: 1px solid #3765a3;
         cursor: pointer;
         z-index: 2;
         font-size: 14px;
         font-weight: bold;
         text-decoration: none;
         color: #ffffff;
         text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
         background: #3765a3;
         background: -webkit-linear-gradient(#3765a3, #3765a3);
         background: -moz-linear-gradient(#3765a3, #3765a3);
         background: -o-linear-gradient(#3765a3, #3765a3);
         background: -ms-linear-gradient(#3765a3, #3765a3);
         background: linear-gradient(#3765a3, #3765a3);
         box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
         }
         #sidebarmenu > ul > li > a:hover,
         #sidebarmenu > ul > li.active > a,
         #sidebarmenu > ul > li.open > a {
         color: #eeeeee;
         background: #3765a3;
         background: -webkit-linear-gradient(#3765a3, #3765a3);
         background: -moz-linear-gradient(#3765a3, #3765a3);
         background: -o-linear-gradient(#3765a3, #3765a3);
         background: -ms-linear-gradient(#3765a3, #3765a3);
         background: linear-gradient(#3765a3, #3765a3);
         }
         #sidebarmenu > ul > li.open > a {
         box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.15);
         border-bottom: 1px solid #3765a3;
         }
         #sidebarmenu > ul > li:last-child > a,
         #sidebarmenu > ul > li.last > a {
         border-bottom: 1px solid #3765a3;
         }
         .holder {
         width: 0;
         height: 0;
         position: absolute;
         top: 0;
         right: 0;
         }
         .holder::after,
         .holder::before {
         display: block;
         position: absolute;
         content: "";
         width: 6px;
         height: 6px;
         right: 20px;
         z-index: 10;
         -webkit-transform: rotate(-135deg);
         -moz-transform: rotate(-135deg);
         -ms-transform: rotate(-135deg);
         -o-transform: rotate(-135deg);
         transform: rotate(-135deg);
         }
         .holder::after {
         top: 17px;
         border-top: 2px solid #ffffff;
         border-left: 2px solid #ffffff;
         }
         #sidebarmenu > ul > li > a:hover > span::after,
         #sidebarmenu > ul > li.active > a > span::after,
         #sidebarmenu > ul > li.open > a > span::after {
         border-color: #eeeeee;
         }
         .holder::before {
         top: 18px;
         border-top: 2px solid;
         border-left: 2px solid;
         border-top-color: inherit;
         border-left-color: inherit;
         }
         #sidebarmenu ul ul li a {
         cursor: pointer;
         border-bottom: 1px solid #32373e;
         border-left: 1px solid #32373e;
         border-right: 1px solid #32373e;
         padding: 10px 20px;
         z-index: 1;
         text-decoration: none;
         font-size: 13px;
         color: #eeeeee;
         background: #49505a;
         box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
         }
         #sidebarmenu ul ul li:hover > a,
         #sidebarmenu ul ul li.open > a,
         #sidebarmenu ul ul li.active > a {
         background: #424852;
         color: #ffffff;
         }
         #sidebarmenu ul ul li:first-child > a {
         box-shadow: none;
         }
         #sidebarmenu ul ul ul li:first-child > a {
         box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
         }
         #sidebarmenu ul ul ul li a {
         padding-left: 30px;
         }
         #sidebarmenu > ul > li > ul > li:last-child > a,
         #sidebarmenu > ul > li > ul > li.last > a {
         border-bottom: 0;
         }
         #sidebarmenu > ul > li > ul > li.open:last-child > a,
         #sidebarmenu > ul > li > ul > li.last.open > a {
         border-bottom: 1px solid #32373e;
         }
         #sidebarmenu > ul > li > ul > li.open:last-child > ul > li:last-child > a {
         border-bottom: 0;
         }
         #sidebarmenu ul ul li.has-sub > a::after {
         display: block;
         position: absolute;
         content: "";
         width: 5px;
         height: 5px;
         right: 20px;
         z-index: 10;
         top: 11.5px;
         border-top: 2px solid #eeeeee;
         border-left: 2px solid #eeeeee;
         -webkit-transform: rotate(-135deg);
         -moz-transform: rotate(-135deg);
         -ms-transform: rotate(-135deg);
         -o-transform: rotate(-135deg);
         transform: rotate(-135deg);
         }
         #sidebarmenu ul ul li.active > a::after,
         #sidebarmenu ul ul li.open > a::after,
         #sidebarmenu ul ul li > a:hover::after {
         border-color: #ffffff;
         }
      </style>
      
        
         
         ( function( $ ) {
           $( document ).ready(function() {
           $('#sidebarmenu li.has-sub>a').on('click', function(){
               $(this).removeAttr('href');
               var element = $(this).parent('li');
               if (element.hasClass('open')) {
                 element.removeClass('open');
                 element.find('li').removeClass('open');
                 element.find('ul').slideUp();
               }
               else {
                 element.addClass('open');
                 element.children('ul').slideDown();
                 element.siblings('li').children('ul').slideUp();
                 element.siblings('li').removeClass('open');
                 element.siblings('li').find('li').removeClass('open');
                 element.siblings('li').find('ul').slideUp();
               }
             });
         
             $('#sidebarmenu>ul>li.has-sub>a').append('');
         
             (function getColor() {
               var r, g, b;
               var textColor = $('#sidebarmenu').css('color');
               textColor = textColor.slice(4);
               r = textColor.slice(0, textColor.indexOf(','));
               textColor = textColor.slice(textColor.indexOf(' ') + 1);
               g = textColor.slice(0, textColor.indexOf(','));
               textColor = textColor.slice(textColor.indexOf(' ') + 1);
               b = textColor.slice(0, textColor.indexOf(')'));
               var l = rgbToHsl(r, g, b);
               if (l > 0.7) {
                 $('#sidebarmenu>ul>li>a').css('text-shadow', '0 1px 1px rgba(0, 0, 0, .35)');
                 $('#sidebarmenu>ul>li>a>span').css('border-color', 'rgba(0, 0, 0, .35)');
               }
               else
               {
                 $('#sidebarmenu>ul>li>a').css('text-shadow', '0 1px 0 rgba(255, 255, 255, .35)');
                 $('#sidebarmenu>ul>li>a>span').css('border-color', 'rgba(255, 255, 255, .35)');
               }
             })();
         
           function rgbToHsl(r, g, b) {
               r /= 255, g /= 255, b /= 255;
               var max = Math.max(r, g, b), min = Math.min(r, g, b);
               var h, s, l = (max + min) / 2;
         
               if(max == min){
                   h = s = 0;
               }
               else {
                   var d = max - min;
                   s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
                   switch(max){
                       case r: h = (g - b) / d + (g 
   </head>
   <body>
      

OUTPUT Screen
The expected output is achieved.


Thanks for using pheonix solutions.

You find this tutorial helpful? Share with your friends to keep it alive.

Leave a Reply