Sidebar Menu with Sliding Submenu

Sidebar Menu with Sliding Submenu Using HTML, CSS and JavaScript

Byjvcodes

If you are developing a web project where navigation can be divided into several sections a sidebar menu with sliding submenu is perfect. Such a menu makes a way to develop proper structure of the site, and the users will be able to find what they want.

Sliding submenus enable you to hide extra features and allow them to appear only when necessary, so the layout is clean.

Here I have added free source code to implement an efficient sidebar menu with custom submenu slide effect in your projects.

GitHub Source: Sidebar Menu with Sliding Submenu

Features

  • Main Menu Items: That is holds the main menu items (Dashboard, Pets, Reports, etc.).
  • Nested Submenus: Clients in particular as well as Appointments and Billing collapse to offer further submenu selections.
  • Icons for Menu Items: We use Font Awesome icons in order to make the most of easily recognizable graphic elements that help users sort out the menu as quickly as possible.
  • Submenu Activation on Click: If a user hovers over a menu item that has sub options, it pulls up a submenu which makes for easy mobile navigation.
  • Auto-Collapse Other Submenus: Each submenu, when opened, automatically triggers the closing of another submenu, and the overall layout of this interface is not complicated in order to avoid confusion.
  • Scrollable Menu Content: The contents of the menu can be scrolled, meaning that no matter the length of the sidebar, all options on the menu will be visible.
  • Responsive Close Button: There is also a close button located in the main navigation bar that is useful to collapse the sidebar on the small screen sizes for better layout.
  • Animated Transitions: Horizontal and vertical menu transitions effects while opening and closing the sidebar and submenus, as well as toggling, enhance user experience.
  • Hover Effects: Some items on the menu have hover effects, providing usability and visual feedback to the user.
  • Easy to Customize: The code is easy to modify to swap out colors, sizes and layouts as per the client’s requirements.
  • Compatibility: This sidebar menu is fully responsive and supports all modern browsers, so your users will have no differences.
  • Clean Code: The code is written with readability and maintainability in mind and one can hardly go wrong by using this code starting out.

Technologies Used

  • HTML (Hypertext Markup Language)
  • CSS (Cascading Style Sheets)
  • JS (JavaScript)

Recommended for You

Video Tutorial

Video thumbnail Watch on YouTube

Steps to Build Sidebar Menu

  • Create Project Folder: First of all, type a new folder’s name with which you are going to arrange the project materials.
  • Create index.html: This file is going to store all the HTML code for sidebar and submenu.
  • Create style.css: In this file, you will have to enter the styles for the sidebar, check the menu items and choose the effects for the sliding submenu.
  • Create script.js: This file will contain the JavaScript that will define the behaviours of the sliding submenu.
  • Copy & Paste the Code: When the files are prepared, copy the code of each section given below and paste at the specified places.

HTML

Here is the HTML code for your index.html file:

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Meta information about the page -->
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    
    <!-- Page Title -->
    <title>Pet Care Admin Dashboard | JV Codes</title>
    
    <!-- Link to external CSS for styling -->
    <link rel="stylesheet" href="style.css" />
    
    <!-- Font Awesome CDN for icons used in the menu -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" />
</head>
<body>
  <!-- Sidebar navigation for the admin dashboard -->
    <nav class="sidebar">
      <!-- Logo or brand name -->
      <a href="#" class="logo">Pet Care Admin</a>

      <!-- Main menu content -->
      <div class="menu-content">
        <ul class="menu-items">
          <!-- Title of the main menu section -->
          <div class="menu-title">Main Menu</div>

          <!-- Dashboard menu item with icon -->
          <li class="item">
            <a href="#"><i class="fa-solid fa-tachometer-alt"></i> Dashboard</a>
          </li>

          <!-- Pets menu item with icon -->
          <li class="item">
            <a href="#"><i class="fa-solid fa-paw"></i> Pets</a>
          </li>

          <!-- Clients submenu section with sliding submenu -->
          <li class="item">
            <div class="submenu-item">
              <span><i class="fa-solid fa-users"></i> Clients</span>
              <i class="fa-solid fa-chevron-right"></i>
            </div>
            
            <!-- Submenu items for client management -->
            <ul class="menu-items submenu">
              <div class="menu-title">
                <i class="fa-solid fa-chevron-left"></i> Client Management
              </div>
              <li class="item">
                <a href="#"><i class="fa-solid fa-user-plus"></i> Add Client</a>
              </li>
              <li class="item">
                <a href="#"><i class="fa-solid fa-user-edit"></i> Edit Client</a>
              </li>
              <li class="item">
                <a href="#"><i class="fa-solid fa-address-book"></i> Client List</a>
              </li>
            </ul>
          </li>

          <!-- Appointments submenu section with sliding submenu -->
          <li class="item">
            <div class="submenu-item">
              <span><i class="fa-solid fa-calendar-check"></i> Appointments</span>
              <i class="fa-solid fa-chevron-right"></i>
            </div>

            <!-- Submenu items for appointment management -->
            <ul class="menu-items submenu">
              <div class="menu-title">
                <i class="fa-solid fa-chevron-left"></i> Appointment Management
              </div>
              <li class="item">
                <a href="#"><i class="fa-solid fa-calendar-plus"></i> Schedule Appointment</a>
              </li>
              <li class="item">
                <a href="#"><i class="fa-solid fa-calendar-day"></i> View Appointments</a>
              </li>
              <li class="item">
                <a href="#"><i class="fa-solid fa-calendar-times"></i> Cancel Appointment</a>
              </li>
            </ul>
          </li>

          <!-- Billing submenu section with sliding submenu -->
          <li class="item">
            <div class="submenu-item">
              <span><i class="fa-solid fa-file-invoice"></i> Billing</span>
              <i class="fa-solid fa-chevron-right"></i>
            </div>

            <!-- Submenu items for billing management -->
            <ul class="menu-items submenu">
              <div class="menu-title">
                <i class="fa-solid fa-chevron-left"></i> Billing Management
              </div>
              <li class="item">
                <a href="#"><i class="fa-solid fa-file-invoice-dollar"></i> Invoices</a>
              </li>
              <li class="item">
                <a href="#"><i class="fa-solid fa-receipt"></i> Payment History</a>
              </li>
              <li class="item">
                <a href="#"><i class="fa-solid fa-credit-card"></i> Payment Methods</a>
              </li>
            </ul>
          </li>

          <!-- Reports menu item with icon -->
          <li class="item">
            <a href="#"><i class="fa-solid fa-chart-bar"></i> Reports</a>
          </li>

          <!-- Settings menu item with icon -->
          <li class="item">
            <a href="#"><i class="fa-solid fa-cog"></i> Settings</a>
          </li>

          <!-- Logout menu item with icon -->
          <li class="item">
            <a href="#"><i class="fa-solid fa-sign-out-alt"></i> Logout</a>
          </li>
        </ul>
      </div>
    </nav>

    <!-- Top navigation bar for sidebar toggle -->
    <nav class="navbar">
      <i class="fa-solid fa-bars" id="sidebar-close"></i>
    </nav>

    <!-- Main content area of the admin dashboard -->
    <main class="main">
      <h1>Admin Dashboard Content</h1>
    </main>

    <!-- Link to external JavaScript for interactive elements -->
    <script src="script.js"></script>
</body>
</html>

CSS

Here is the complete code for style.css file to style the sidebar menu:

/* Import Google font - Poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");

/* Global reset and font setup */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

/* Sidebar styling */
.sidebar {
  position: fixed;
  height: 100%;
  width: 260px;
  background: #060318;
  padding: 15px;
  z-index: 99;
}

/* Sidebar logo styling */
.logo {
  font-size: 25px;
  color: #e8e8ea; /* Lighter color for logo text */
  padding: 0 15px;
}

/* General link styling within the sidebar */
.sidebar a {
  color: #e8e8ea;
  text-decoration: none;
}

/* Container for menu content within the sidebar */
.menu-content {
  position: relative;
  height: 100%;
  width: 100%;
  margin-top: 40px;
  overflow-y: scroll;
}

/* Hide default scrollbar in sidebar */
.menu-content::-webkit-scrollbar {
  display: none;
}

/* Menu items styling */
.menu-items {
  height: 100%;
  width: 100%;
  list-style: none;
  transition: all 0.4s ease;
}

/* Active submenu styling - shifts items slightly */
.submenu-active .menu-items {
  transform: translateX(-56%);
}

/* Main menu title styling */
.menu-title {
  color: #e8e8ea;
  font-size: 14px;
  padding: 15px 20px;
}

/* Styling for links and submenu item containers */
.item a,
.submenu-item {
  padding: 16px;
  display: inline-block;
  width: 100%;
  border-radius: 12px;
  color: #e8e8ea;
}

/* Icon styling within menu items */
.item i {
  font-size: 12px;
}

/* Hover effect for menu and submenu items */
.item a:hover,
.submenu-item:hover,
.submenu .menu-title:hover {
  background: rgba(255, 255, 255, 0.1); /* Light overlay for hover */
}

/* Submenu toggle area styling */
.submenu-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

/* Submenu container styling */
.submenu {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  right: calc(-100% - 26px);
  background: #060318;
  display: none;
}

/* Show submenu when active */
.show-submenu ~ .submenu {
  display: block;
}

/* Submenu title styling */
.submenu .menu-title {
  border-radius: 12px;
  cursor: pointer;
}

/* Submenu title icon alignment */
.submenu .menu-title i {
  margin-right: 10px;
}

/* Navbar and main content positioning */
.navbar,
.main {
  left: 260px;
  width: calc(100% - 260px);
  transition: all 0.5s ease;
  z-index: 1000;
}

/* Adjust positioning when sidebar is collapsed */
.sidebar.close ~ .navbar,
.sidebar.close ~ .main {
  left: 0;
  width: 100%;
}

/* Navbar styling */
.navbar {
  position: fixed;
  color: #fff;
  padding: 15px 20px;
  font-size: 25px;
  background: #5b045e; /* Updated color for navbar */
  cursor: pointer;
}

/* Sidebar toggle icon in navbar */
.navbar #sidebar-close {
  cursor: pointer;
}

/* Main content area styling */
.main {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  z-index: 100;
  background: #fffabb;
}

/* Main content heading styling */
.main h1 {
  color: #2b2a33;
  font-size: 40px;
  text-align: center;
}

JavaScript

Here is the complete code for script.js file to function the menu:

// Select the sidebar, close button, menu content, submenu items, and submenu titles
const sidebar = document.querySelector(".sidebar");
const sidebarClose = document.querySelector("#sidebar-close");
const menu = document.querySelector(".menu-content");
const menuItems = document.querySelectorAll(".submenu-item");
const subMenuTitles = document.querySelectorAll(".submenu .menu-title");

// Toggle the sidebar's closed state when the close button is clicked
sidebarClose.addEventListener("click", () => sidebar.classList.toggle("close"));

// Loop through each submenu item and add click event listeners
menuItems.forEach((item, index) => {
  item.addEventListener("click", () => {
    // Activate submenu view by adding 'submenu-active' class to menu
    menu.classList.add("submenu-active");
    // Display the clicked submenu by adding 'show-submenu' class
    item.classList.add("show-submenu");

    // Hide other submenus by removing 'show-submenu' from non-clicked items
    menuItems.forEach((item2, index2) => {
      if (index !== index2) {
        item2.classList.remove("show-submenu");
      }
    });
  });
});

// Add click event listeners to submenu titles to close submenus
subMenuTitles.forEach((title) => {
  title.addEventListener("click", () => {
    // Remove 'submenu-active' class from menu to close all submenus
    menu.classList.remove("submenu-active");
  });
});

Download Source Code

Click here to download this sidebar menu with sliding submenu source code given below. It has no copy rights and may be used in your other projects freely.

Download Source Code

Conclusion

This Sidebar Menu with Sliding Submenu Using HTML, CSS, and JavaScript is one of the most useful elements of many web resources. Include it on your sites and do not forget to credit JV Source Codes through a link back to the original article.

Never miss the new tutorials by subscribing, and if you have any questions, feel free to leave a comment, I’ll gladly assist you.

Download JV Source Codes

Similar Posts

Product Card With Quick View Popup Effect
| |

Product Card With Quick View Popup Effect in HTML, CSS and JavaScript

In this article, I will give you the free source code to build Product Card With Quick View Popup Effect in HTML, CSS, & JS. This is an innovative feature which facilitates a preview of certain details without switching to another page – perfect for modern eCommerce websites. In this article, I will explain how…

Google Drive Direct Download Link Generator
| | |

Google Drive Direct Download Link Generator Tool in HTML, CSS, JavaScript

Do you want to make tool for direct downloading files from Google Drive with less time and effort? You will be glad to know that the Google Drive Direct Download Link Generator Tool in HTML, CSS, and JavaScript is ready for you. Here I am going to provide you free source codes of your own…

Here I will give you a Free Source Code for Responsive Sidebar Menu with Active Link Using HTML CSS.
| | |

Responsive Sidebar Menu with Active Link Using HTML and CSS

How to create a responsive sidebar menu with an active link effect to fit into today’s web designs? A sidebar menu enables users to explore other parts of a site without removing the main content out of sight. Being responsive, this sidebar suits any screen size, and it is therefore easily navigable on both desktop…

Leave a Reply

Your email address will not be published. Required fields are marked *