You can change the direction by placing the nav off the left side instead of the right and then transition each list element with a different delay on each.
If you wanted the nav items to slide back out when you close you;d need to do the delays in reverse order. You’d also need to delay the main mav from closing first otherwise you won’t see it happen.
Roughly like this:
.offcanvas-collapse {
position: fixed;
top: 56px; /* Height of navbar */
bottom: 0;
left: 0;
width: 70%;
padding-right: 1rem;
padding-left: 1rem;
overflow-y: auto;
visibility: hidden;
background-color: #343a40;
transform: translateX(-100%);
transition: transform 0.5s ease-in-out, visibility 0.5s ease-in-out;
transition-delay: 1s;
}
.offcanvas-collapse.open {
visibility: visible;
transform: translateX(0%);
transition-delay: 0s;
}
#navbarsExampleDefault > ul > li {
transform: translateX(-100%);
transition: transform 1s ease;
}
.offcanvas-collapse.open#navbarsExampleDefault > ul > li {
transform: translateX(0%);
transition-delay: 0s;
}
.offcanvas-collapse.open#navbarsExampleDefault > ul > li:nth-child(1) {
transition-delay: 0.1s;
}
.offcanvas-collapse.open#navbarsExampleDefault > ul > li:nth-child(2) {
transition-delay: 0.2s;
}
.offcanvas-collapse.open#navbarsExampleDefault > ul > li:nth-child(3) {
transition-delay: 0.3s;
}
.offcanvas-collapse.open#navbarsExampleDefault > ul > li:nth-child(4) {
transition-delay: 0.4s;
}
.offcanvas-collapse.open#navbarsExampleDefault > ul > li:nth-child(5) {
transition-delay: 0.5s;
}
.offcanvas-collapse.open#navbarsExampleDefault > ul > li:nth-child(6) {
transition-delay: 0.6s;
}
.offcanvas-collapse.open#navbarsExampleDefault > ul > li:nth-child(7) {
transition-delay: 0.7s;
}
.offcanvas-collapse.open#navbarsExampleDefault > ul > li:nth-child(8) {
transition-delay: 0.8s;
}
.offcanvas-collapse.open#navbarsExampleDefault > ul > li:nth-child(9) {
transition-delay: 0.9s;
}
.offcanvas-collapse.open#navbarsExampleDefault > ul > li:nth-child(10) {
transition-delay: 1s;
}
.offcanvas-collapse.open#navbarsExampleDefault > ul > li {
transform: translateX(0%);
}
#navbarsExampleDefault > ul > li:nth-child(1) {
transition-delay: 0.9s;
}
#navbarsExampleDefault > ul > li:nth-child(2) {
transition-delay: 0.8s;
}
#navbarsExampleDefault > ul > li:nth-child(3) {
transition-delay: 0.7s;
}
#navbarsExampleDefault > ul > li:nth-child(4) {
transition-delay: 0.6s;
}
#navbarsExampleDefault > ul > li:nth-child(5) {
transition-delay: 0.5s;
}
#navbarsExampleDefault > ul > li:nth-child(6) {
transition-delay: 0.4s;
}
#navbarsExampleDefault > ul > li:nth-child(7) {
transition-delay: 0.3s;
}
#navbarsExampleDefault > ul > li:nth-child(8) {
transition-delay: 0.2s;
}
#navbarsExampleDefault > ul > li:nth-child(9) {
transition-delay: 0.1s;
}
#navbarsExampleDefault > ul > li:nth-child(10) {
transition-delay: 0s;
}
Note that you only need enough rules to cover the amount of direct children links you have. I put in enough for 10 (li:nth-child(10)) but you should only really need to use the same amount as you have main links (ie. 5 in your demo).
This is probably the wrong way to do it as bootstrap probably has a native way of handling this but you could add a backdrop div when the nav is opened and then check for a click on the backdrop element to close it.
e.g.
You should probably check the bootstrap documentation to see if there already is something like this baked in .
I’m coming back to this and trying to add a close button inside of navbar-collapse. So I would have the hamburger on the top right of the screen and the close button inside the flyout section (.navbar-collapse).
I’m not sure what I need to do on the JS side. I tried following the pattern of what I had and added a closebtn var and added that to the toggle function, but I’m getting an error (TypeError: null is not an object (evaluating ‘closebtn.classList’)) and it’s not working.
(function () {
"use strict";
const nav = document.querySelector("#navbarSideCollapse");
const backdrop = document.querySelector(".backdrop");
const body = document.querySelector("body");
const hamburger = document.querySelector(".offcanvas-collapse");
const closebtn = document.querySelector(".closebtn");
nav.addEventListener("click", function (e) {
e.preventDefault();
hamburger.classList.toggle("open");
body.classList.toggle("open");
closebtn.classList.toggle("open");
});
backdrop.addEventListener("click", function (e) {
if (body.classList.contains('open')) {
hamburger.classList.toggle("open");
body.classList.toggle("open");
nav.classList.toggle("open");
closebtn.classList.toggle("open");
}
});
})();