An overlay nav system for Bootstrap 5 that enables a hamburger button to toggle a sidebar menu sliding from the left edge of the screen.
It supports a multi-level menu structure and can organize sub-menus in a vertical accordion interface.
How to use it:
1. Import the necessary Bootstrap 5 framework.
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" /> <script src="/path/to/cdn/bootstrap.min.js"></script>
2. Add an accordion menu to the side nav. Note that this example uses Font Awesome for the open/close icons.
<div id="mySidebar" class="sidebar">
<a class="closebtn collapsed" id="closeNav" type="button" aria-expanded="false"><i class="fa fa-times-circle"></i> close</a>
<div class="accordion text-left" id="accordionExample">
<div class="accordion-item">
<div class="accordion-header" id="headingOne">
<h5 class="mb-0">
<button class="btn accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
Menu 1
</button>
</h5>
</div>
<div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body text-left">
Sub Menu Items Here
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header" id="headingTwo">
<h5 class="mb-0">
<button class="btn btn-link accordion-button collapsed custom-button" type="button" data-bs-toggle="collapse"
data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Menu 2
</button>
</h5>
</div>
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
<div class="accordion-body">
Sub Menu Items Here
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header" id="headingThree">
<h5 class="mb-0">
<button class="btn btn-link accordion-button collapsed custom-button" type="button" data-bs-toggle="collapse"
data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Menu 3
</button>
</h5>
</div>
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
<div class="accordion-body">
Sub Menu Items Here
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header" id="headingFour">
<h5 class="mb-0">
<button class="btn btn-link accordion-button collapsed custom-button" type="button" data-bs-toggle="collapse"
data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
Menu 4
</button>
</h5>
</div>
<div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingFour" data-bs-parent="#accordionExample">
<div class="accordion-body">
Sub Menu Items Here
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header" id="headingFive">
<h5 class="mb-0">
<button class="btn btn-link accordion-button collapsed custom-button" type="button" data-bs-toggle="collapse"
data-bs-target="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
Menu 5
</button>
</h5>
</div>
<div id="collapseFive" class="accordion-collapse collapse" aria-labelledby="headingFive" data-bs-parent="#accordionExample">
<div class="accordion-body">
Sub Menu Items Here
</div>
</div>
</div>
</div>
</div>
3. Add a hamburger menu toggle button to the main content.
<div id="main" class="main"> <button class="openbtn" id="openNav">☰ open</button> <!-- Main Content Here --> </div>
4. The necessary CSS styles.
.btn {
padding: .375rem !important;
color: #f1f1f1;
font-size: 20px;
background-color: transparent;
text-transform: lowercase;
}
.btn:hover, .btn:focus {
color: #fff;
text-decoration: none;
box-shadow: none;
}
.stronger {
color: #8bc34a !important;
font-weight: 700
}
.sidebar {
height: 100%;
width: 0;
position: fixed;
white-space: nowrap;
z-index: 999999;
top: 0;
left: 0;
/* background-color: rgba(27,80,119,0.3); */
background-color: rgba(0,0,0,0.6);
border-right: 1px solid #000;
overflow-x: hidden;
overflow-y: auto;
transition: 0.5s;
padding-top: 30px;
font-size: 18px;
}
/* width */
::-webkit-scrollbar {
width: 7px;
}
/* Track */
::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0);
opacity: 0;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: rgba(136, 136, 136, 0.20);
opacity: 0.20;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background:rgba(241, 241, 241, 0.20);
opacity: 0.20;
}
.sidebar a {
padding: 10px 15px;
text-decoration: none;
font-size: 25px;
color: rgba(255, 255, 255, 1);
display: block;
opacity: 0;
/* transition: 0.5s; */
}
.sidebar a:hover {
color: rgba(255,255,255, 1);
}
.sidebar .closebtn {
position: absolute;
top: 0;
right: 0;
font-size: 20px;
margin-left: 50px;
cursor: pointer;
user-select: none;
}
.openbtn {
font-size: 20px;
cursor: pointer;
background-color: transparent;
color: white;
padding: 10px 15px;
outline: none;
box-shadow: none;
border: none;
position: fixed;
z-index: 999999;
opacity: 1;
user-select: none;
}
.openbtn:hover {
background-color: transparent;
}
button:focus {
outline: none;
}
#main {
transition: margin-left .5s;
height: 100%;
width: 100%;
position: fixed;
z-index: 1;
}
@media only screen and (max-width:1536px) {
.sidebar {
font-size: .85rem;
}
}
@media only screen and (max-width: 1366px) {
.sidebar {
font-size: .85rem;
}
}
/* Accordion */
.accordion-body {
color: #fff;
padding-left: 15px;
white-space: normal !important;
}
.accordion-item, .accordion-button {
background-color: transparent !important;
text-decoration: none !important;
}
.accordion-button::before{
flex-shrink:0;
width:1.25rem;
height:1.25rem;
margin-left: 10px;
margin-right: 10px;
content:"";
background-image: url(../images/arrow-verde.png);
background-repeat:no-repeat;
background-size:1.25rem;
transition:transform .2s ease-in-out;
/* background-color:lightblue; */
}
.accordion-button:not(.collapsed)::before {
background-image: url(../images/arrow-verde.png);
transform: rotate(-180deg);
}
.accordion-button:not(.collapsed) {
color: #fff;
}
.accordion-button {
transition: ease .6s;
}
button > span {
padding: 0 6px 0 0px;
}
.accordion {
padding-top: 15px;
}
5. The main script to toggle the sidebar nav & accordion menu.
// Open Sidebar
(function () {
document.querySelector("#openNav").addEventListener('click', function() {
document.querySelector(".openbtn").style.cssText = "opacity: 0";
document.querySelector("#mySidebar").style.cssText = "width: 30%";
document.querySelector("#main").style.cssText = "margin-left: 0";
document.querySelector("#closeNav").style.cssText = "opacity: 1; transition: 2s";
})
})();
// Close Sidebar
function recolheBarraLateral () {
document.querySelector("#mySidebar").style.cssText = "width: 0";
document.querySelector("#main").style.cssText = "margin-left: 0";
document.querySelector(".openbtn").style.cssText = "opacity: 1";
document.querySelector("#closeNav").style.cssText = "opacity: 0; transition: 0.3s";
}
// Close Accordion
(function () {
var myCollapseOne = document.getElementById('collapseOne');
var myCollapseTwo = document.getElementById('collapseTwo');
var myCollapseThree = document.getElementById('collapseThree');
var myCollapseFour = document.getElementById('collapseFour');
var myCollapseFive = document.getElementById('collapseFive');
var btnFecha = document.querySelector("#closeNav");
btnFecha.addEventListener('click', function() {
recolheBarraLateral();
// Collapse One
var bsCollapseOne = new bootstrap.Collapse(myCollapseOne, {
toggle: false
})
bsCollapseOne.hide()
// Collapse Two
var bsCollapseTwo = new bootstrap.Collapse(myCollapseTwo, {
toggle: false
})
bsCollapseTwo.hide()
// Collapse Three
var bsCollapseThree = new bootstrap.Collapse(myCollapseThree, {
toggle: false
})
bsCollapseThree.hide()
// Collapse Four
var bsCollapseFour = new bootstrap.Collapse(myCollapseFour, {
toggle: false
})
bsCollapseFour.hide()
// Collapse Five
var bsCollapseFive = new bootstrap.Collapse(myCollapseFive, {
toggle: false
})
bsCollapseFive.hide()
})
})();
The post Overlay Accordion Menu For Bootstrap 5 appeared first on CSS Script.