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>