THEMETRIAL

Responsive Sidebar Navigation For Bootstrap 5

Author:harshitjain-hj
Views Total:0 views
Official Page:Go to website
Last Update:March 3, 2021
License:MIT

Preview:

Responsive Sidebar Navigation For Bootstrap 5

Description:

An extension to Bootstrap 5 that lets you create a responsive sidebar navigation (also called drawer navigation, off-canvas menu) on your next Bootstrap project.

How to use it:

1. Create the HTML for the sidebar navigation.

<div class="side-navbar active-nav d-flex justify-content-between flex-wrap flex-column" id="sidebar">
  <ul class="nav flex-column text-white w-100">
    <a href="https://www.cssscript.com/#" class="nav-link h3 text-white my-2">
      Side Nav
    </a>
    <li href="https://www.cssscript.com/#" class="nav-link">
      <span class="mx-2">Home</span>
    </li>
    <li href="https://www.cssscript.com/#" class="nav-link">
      <span class="mx-2">About</span>
    </li>
    <li href="https://www.cssscript.com/#" class="nav-link">
      <span class="mx-2">Contact</span>
    </li>
  </ul>
</div>

2. Add the menu toggle button to your main content.

<div class="p-1 my-container active-cont">
  Main Content Here
  ...
  Replace the menu toggle icon as per your needs
  <a class="btn border-0" id="menu-btn">
    <i class="bx bx-menu"></i>
  </a>
</div>

3. The main styles for the sidebar navigation.

.side-navbar {
  width: 180px;
  height: 100%;
  position: fixed;
  margin-left: -300px;
  background-color: #100901;
  transition: 0.5s;
}

.nav-link:active,
.nav-link:focus,
.nav-link:hover {
  background-color: #ffffff26;
}

.my-container {
  transition: 0.4s;
}

.active-nav {
  margin-left: 0;
}

/* for main section */
.active-cont {
  margin-left: 180px;
}

#menu-btn {
  background-color: #100901;
  color: #fff;
  margin-left: -62px;
}

4. The required JavaScript to enable the sidebar navigation.

var menu_btn = document.querySelector("#menu-btn");
var sidebar = document.querySelector("#sidebar");
var container = document.querySelector(".my-container");
menu_btn.addEventListener("click", () => {
  sidebar.classList.toggle("active-nav");
  container.classList.toggle("active-cont");
});


Source link

Add comment

NOTE :

All visitors can share my site’s content on their blogs, sites, and social networks to enrich the content

Only share the source www.themetrial.com

Follow us

Don't be shy, get in touch. We love meeting interesting people and making new friends.