Author: | hiltonmuccillo |
---|---|
Views Total: | 2,348 views |
Official Page: | Go to website |
Last Update: | May 23, 2022 |
License: | MIT |
Preview:

Description:
Sidebar menus are great. They bring order to your website, saving your visitors from the chaos that is horizontal scrolling. One problem with sidebar menus though – they take up valuable screen space and even hide parts of the webpage you’re viewing! This is where an off-canvas menu might be useful.
In this post, we’ll show you how to create an off-canvas sidebar navigation with an accordion menu and hide it until a user wants it, then display it without distracting them.
This Off-canvas Accordion Menu is made with the latest Bootstrap 5 framework, which also works with Bootstrap 4.
See It In Action:
How to use it:
1. Include the latest Bootstrap 5 or Bootstrap 4 framework.
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" /> <script src="/path/to/cdn/bootstrap.bundle.min.js"></script>
2. Create the HTML for the off-canvas sidebar navigation that includes an accordion menu and a close button:
<div id="mySidebar" class="sidebar"> <!-- Close Button --> <a class="closebtn collapsed" id="closeNav" type="button" aria-expanded="false"> Close </a> <!-- Accordion Menu --> <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"> Accordion 1 </button> </h5> </div> <div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordionExample"> <div class="accordion-body text-left"> <p> Accordion 1 Content </p> </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"> Accordion 2 </button> </h5> </div> <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample"> <div class="accordion-body"> <p> Accordion 2 Content </p> </div> </div> </div> <!-- More Accordion Items Here --> </div> </div>
3. Create a toggle button to reveal the sidebar navigation.
<button class="openbtn" id="openNav"> ☰ open </button>
4. The main CSS styles for the sidebar navigation.
.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; } @media only screen and (max-width:1536px) { .sidebar { font-size: .85rem; } } @media only screen and (max-width: 1366px) { .sidebar { font-size: .85rem; } }
5. The main CSS styles for the accordion menu.
.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. Enable the sidebar navigation.
// 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"; }) })(); // Open Sidebar Mobile 100% and Ipad width 50% JS (function () { if (window.innerWidth <= 490) { document.querySelector("#openNav").addEventListener('click', function() { document.querySelector("#mySidebar").style.cssText = "width: 100%"; document.querySelector("#main").style.cssText = "margin-left: 0"; document.querySelector(".openbtn").style.cssText = "opacity: 0"; document.querySelector("#closeNav").style.cssText = "opacity: 1; transition: 2s"; document.querySelector(".footer").style.cssText = "opacity: 0; transition: 2s"; }) } else if (window.innerWidth <= 1024) { document.querySelector("#openNav").addEventListener('click', function() { document.querySelector("#mySidebar").style.cssText = "width: 50%"; document.querySelector("#main").style.cssText = "margin-left: 0"; document.querySelector(".openbtn").style.cssText = "opacity: 0"; document.querySelector("#closeNav").style.cssText = "opacity: 1; transition: 2s"; document.querySelector(".footer").style.cssText = "opacity: 0; 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() }) })();