Hello, readers! Today, let’s Create into the exciting web development as we discover how to craft a responsive Sidebar Dropdown Menu using HTML, CSS, and JavaScript.

How to create Sidebar Dropdown Menu using HTML , CSS & Javascript?

Ever wondered about the intricacies of creating the Sidebar Dropdown Menu with HTML, CSS, and JavaScript? In this tutorial has you covered. Picture a ‘sidebar’ as a website section flanking the right or left, housing crucial navigation links openable or closable at the user’s discretion. Now, Creating a “dropdown” menu—a concealed list within a button or element. Click the button, and voila! The dropdown menu unfolds. Join us in this blog as we guide you through the process of creating a seamless sidebar dropdown menu, blending HTML and JavaScript intricacies into this dynamic project. Let’s elevate your web navigation experience!

sidebar dropdown menu

Sidebar Dropdown Menu PREVIEW

I hope you must have got an idea about the sidebar dropdown menu project.

Code by	N/A
Project Download	Link Available Below
Language used	HTML ,CSS and JavaScript
External link / Dependencies	No
Responsive	Yes

Sidebar Dropdown Menu Table

100+ JavaScript Projects With Source Code ( Beginners to Advanced)

So, Let’s sidebar dropdown menu Project By Adding The Source Codes. For That, First, We Are Using The Html Code.

Step1: HTML Code For Sidebar Dropdown Menu:-

HTML is used to design the website’s layout. So, first, we create the layout, then we style it, and finally, we add features to the button (on clicking the button menu opens ).

Now we’ll look at our HTML code.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Sidebar menu With Sub-menus</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <header class="header">
      <nav class="navbar">
        <span class="open-menu">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="16">
            <g fill="#252a32" fill-rule="evenodd">
              <path d="M0 0h24v2H0zM0 7h24v2H0zM0 14h24v2H0z" />
            </g>
          </svg>
        </span>
        <h1><a href="./index.html" class="brand">Code With Random</a></h1>
        <div class="menu-wrapper">
          <ul class="menu">
            <li class="menu-block">
              <span class="close-menu">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20">
                  <path
                    fill="#252a32"
                    fill-rule="evenodd"
                    d="M17.778.808l1.414 1.414L11.414 10l7.778 7.778-1.414 1.414L10 11.414l-7.778 7.778-1.414-1.414L8.586 10 .808 2.222 2.222.808 10 8.586 17.778.808z"
                  />
                </svg>
              </span>
            </li>
            <li class="menu-item">
              <a href="#" class="menu-link">Menu Item</a>
            </li>
            <li class="menu-item has-collapsible">
              <a href="#"><span></span>Menu Item </a>
              <ul class="menu-child">
                <li class="menu-child-item"><a href="#">Sub Menu Item</a></li>
                <li class="menu-child-item"><a href="#">Sub Menu Item</a></li>
                <li class="menu-child-item"><a href="#">Sub Menu Item</a></li>
                <li class="menu-child-item"><a href="#">Sub Menu Item</a></li>
                <li class="menu-child-item"><a href="#">Sub Menu Item</a></li>
              </ul>
            </li>
            <li class="menu-item has-collapsible">
              <a href="#"><span></span>Menu Item</a>
              <ul class="menu-child">
                <li class="menu-child-item"><a href="#">Sub Menu Item</a></li>
                <li class="menu-child-item"><a href="#">Sub Menu Item</a></li>
                <li class="menu-child-item"><a href="#">Sub Menu Item</a></li>
                <li class="menu-child-item"><a href="#">Sub Menu Item</a></li>
                <li class="menu-child-item"><a href="#">Sub Menu Item</a></li>
              </ul>
            </li>
            <li class="menu-item has-collapsible">
              <a href="#">Menu Item</a>
              <ul class="menu-child">
                <li class="menu-child-item"><a href="#">Sub Menu Item</a></li>
                <li class="menu-child-item"><a href="#">Sub Menu Item</a></li>
                <li class="menu-child-item"><a href="#">Sub Menu Item</a></li>
                <li class="menu-child-item"><a href="#">Sub Menu Item</a></li>
                <li class="menu-child-item"><a href="#">Sub Menu Item</a></li>
              </ul>
            </li>
            <li class="menu-item has-collapsible">
              <a href="#"><span></span>Menu Item</a>
              <ul class="menu-child">
                <li class="menu-child-item"><a href="#">Sub Menu Item</a></li>
                <li class="menu-child-item"><a href="#">Sub Menu Item</a></li>
                <li class="menu-child-item"><a href="#">Sub Menu Item</a></li>
                <li class="menu-child-item"><a href="#">Sub Menu Item</a></li>
                <li class="menu-child-item"><a href="#">Sub Menu Item</a></li>
              </ul>
            </li>
            <li class="menu-item">
              <a href="#" class="menu-link">Menu Item</a>
            </li>
            <li class="menu-item">
              <a href="#" class="menu-link">Menu Item</a>
            </li>
          </ul>
        </div>
      </nav>
    </header>
    <section>
      <img
        src="https://images.unsplash.com/photo-1519389950473-47ba0277781c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80"
      />
    </section>
    <script src="index.js"></script>
  </body>
</html>

Restaurant Website Using HTML and CSS

The HTML code used here is very simple; you will understand it right away. Simply read the article carefully, and you can also copy this code into your IDE for easy access.

We’ve added a header section where we’ll build our sidebar dropdown menu. We added some SVG icons to our header section, followed by the main heading of our webpage using the <h1> tag.

Now, for our sidebar, we’ve added a nav tag, and within that, we’ve added a div tag. To create the navbar menu items, we used an unordered list with anchor tags to create the different navlinks. To include a drop-down menu in our sidebar bar, we nested another unordered list within some of the menu items and created a drop-down within that menu item.

Create Simple Music Player With JAVASCRIPT Code:-

To make our webpage more visually appealing, we used the <img> tag to insert an image within it.

Let’s take a look at our HTML structure without any styling.

Sidebar Dropdown Menu Html — Sidebar Dropdown Menu

Table of Contents

Step2: CSS code For Sidebar Dropdown Menu:-

CSS is an abbreviation for Cascading Style Sheet. CSS will be used to style our webpage so that it looks appealing, and CSS is used to improve the user experience.

Now let’s take a look at our CSS code.

*, *::before, *::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  list-style: none;
  list-style-type: none;
  text-decoration: none;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-size: 1rem;
  font-weight: normal;
  line-height: 1.5;
  color: #252a32;
  background: #f1f5f8;
  overflow: hidden;
}
img {
  display: block;
  width: 60%;
  height: 50%;
  margin: 1rem 20rem;
}
a, button {
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  border: none;
  outline: none;
  background: none;
  text-decoration: none;
}

.open-menu, .close-menu {
  cursor: pointer;
  border: none;
  outline: none;
  color: #252a32;
  background: none;
}
.close-menu {
  position: absolute;
  top: 0;
  right: 1rem;
  border: none;
  outline: none;
  color: #252a32;
  background: none;
}
.brand {
  font-family: inherit;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.5;
  color: #d32f2f;
  text-transform: uppercase;
  text-rendering: optimizeLegibility;
}

.header {
  position: relative;
  width: 100%;
  height: auto;
  padding: 0.75rem 1.5rem;
  color: #252a32;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.24);
}
.header .navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.header .navbar .menu-wrapper::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  transition: background 0.5s;
}
.header .navbar .menu-wrapper.offcanvas .menu {
  transform: translate3d(0, 0, 0);
  transition-duration: 0.7s;
  transition-delay: 0.2s;
}
.header .navbar .menu-wrapper.offcanvas::before {
  background: rgba(37, 42, 50, 0.6);
  z-index: 1;
}
.header .navbar .menu {
  position: fixed;
  display: flex;
  flex-direction: column;
  top: 0;
  left: 0;
  bottom: 0;
  max-width: 20rem;
  width: 100%;
  padding: 1.5rem 1rem;
  z-index: 2;
  overflow-y: auto;
  color: #252a32;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.24);
  transform: translate3d(-100%, 0, 0);
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.header .navbar .menu-block {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 3rem;
}
.header .navbar .menu-link {
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: inherit;
  text-transform: uppercase;
  transition: color 0.35s ease-out;
}
.header .navbar .menu-link:hover {
  color: #d32f2f;
}
.header .navbar .menu-item {
  position: relative;
}
.header .navbar .menu-item a {
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: inherit;
  text-transform: uppercase;
  padding: 0.5rem 1rem;
  display: block;
  color: #252a32;
  transition: color 0.35s ease-out;
}
.header .navbar .menu-item a:hover {
  color: #d32f2f;
}
.header .navbar .menu-item.has-collapsible {
  position: relative;
}
.header .navbar .menu-item.has-collapsible .menu-child {
  display: none;
}
.header .navbar .menu-item.has-collapsible .menu-child .menu-child-item a {
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: inherit;
  padding: 0.25rem;
  color: #252a32;
  padding-left: 2.5rem;
  text-transform: uppercase;
  transition: color 0.35s ease-out;
}
.header .navbar .menu-item.has-collapsible .menu-child .menu-child-item a:hover {
  color: #d32f2f;
}
.header .navbar .menu-item.has-collapsible span::after {
  font-family: "Material Icons";
  content: "\2B9A";
  font-size: 1.5rem;
  font-weight: 400;
  line-height: inherit;
  position: absolute;
  top: 0.15rem;
  right: 1rem;
  color: #252a32;
  transition: all 0.35s ease;
}
.header .navbar .menu-item.has-collapsible span::after:hover {
  color: #d32f2f;
}
.header .navbar .menu-item.active.has-collapsible .menu-child {
  display: block;
  transition: all 0.35s ease;
}
.header .navbar .menu-item.active.has-collapsible span::after {
  transform: rotate(90deg);
}

@media screen and (max-width:900px){
  img{
    width: 90%;
    height: 500px;
    margin: 10px 30px;
    background-color: #d32f2f;
  }
}
@media screen and (max-width:500px){
  img{
    width: 70%;
    height: 300px;
    margin: 10px 30px;
    background-color: #d32f2f;
  }
}

In this Line Of Code: Use any element to open the dropdown menu, e.g. a <button>, <a> or <p> element.

Use a container element (like <div>) to create the dropdown menu and add the dropdown links inside it. We will use the same styling for all links inside the sidenav.

Now that we’ve included our CSS code in our article, let’s go over it step by step.

Ecommerce Website Using HTML, CSS, & JavaScript (Source Code)

Step1:First, we used the universal selector to set the margin, padding, and box-sizing to border box. We’ve also changed the list style to “none” and the webscrolling to “smooth.” We will now style all of the elements in our html body using the body tag. We named the font family “Segoe UI” and set the font size and weight to normal. We also set the background colour to smoke white and the overflow to hidden in our body tag.

*, *::before, *::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  list-style: none;
  list-style-type: none;
  text-decoration: none;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-size: 1rem;
  font-weight: normal;
  line-height: 1.5;
  color: #252a32;
  background: #f1f5f8;
  overflow: hidden;
}

Step2: We have now defined the width and height of our image using the image tag as “280” and “260px,” respectively, and we have also added some margin to our image. Use the anchor “a” tag to which we added font family and font size as “inherit” from our body tag. In addition, we changed the text-decoration to “none” and the cursor to “pointer.”

img {
  display: block;
  width: 280;
  height: 260px;
  margin: 0.7rem 12rem;
}
a, button {
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  border: none;
  outline: none;
  background: none;
  text-decoration: none;
}

Step3:We’ll set the width and height of the main heading, as well as the svg icon that opens the sidebar we define the position as absolute, the cursor to a pointer, and the colour to dark grey. To style our webpage’s main heading, we used the (.brand) class font size of “1.75rem” and colour red. The text is in the centre of the page. we also define the text-transform property to uppercase all the letters of our heading.

Portfolio Website Using HTML CSS And JAVASCRIPT ( Source Code)

.open-menu, .close-menu {
  cursor: pointer;
  border: none;
  outline: none;
  color: #252a32;
  background: none;
}
.close-menu {
  position: absolute;
  top: 0;
  right: 1rem;
  border: none;
  outline: none;
  color: #252a32;
  background: none;
}
.brand {
  font-family: inherit;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.5;
  color: #d32f2f;
  text-transform: uppercase;
  text-rendering: optimizeLegibility;
}
.title-large {
  font-family: inherit;
  font-size: 2.25rem;
  font-weight: 700;
  line-height: inherit;
  color: #252a32;
  text-align: center;
  text-transform: capitalize;
}

Step4:Now we’ll style the header, with relative positioning and padding of “0.75rem 1.5rem.” The font is a dark grey, and the background has a box shadow. The header’s navigation is displayed as flex, and the items are centre aligned.

.header {
  position: relative;
  width: 100%;
  height: auto;
  padding: 0.75rem 1.5rem;
  color: #252a32;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.24);
}
.header .navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.header .navbar .menu-wrapper::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  transition: background 0.5s;
}
.header .navbar .menu-wrapper.offcanvas .menu {
  transform: translate3d(0, 0, 0);
  transition-duration: 0.7s;
  transition-delay: 0.2s;
}
.header .navbar .menu-wrapper.offcanvas::before {
  background: rgba(37, 42, 50, 0.6);
  z-index: 1;
}

Step5:Now it’s time to style the sidebar menu; the position is set to relative, the display to flex, the content is justified in the center, the font size is inherited, and the font-weight is “600” with the transition “ease-out.” We’ve added the hover property to the menu. The font colour changes to red as the user hovers over the menu item. The transform property was updated to rotate 90 degrees vertically.

.header .navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.header .navbar .menu-wrapper::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  transition: background 0.5s;
}
.header .navbar .menu-wrapper.offcanvas .menu {
  transform: translate3d(0, 0, 0);
  transition-duration: 0.7s;
  transition-delay: 0.2s;
}
.header .navbar .menu-wrapper.offcanvas::before {
  background: rgba(37, 42, 50, 0.6);
  z-index: 1;
}
.header .navbar .menu {
  position: fixed;
  display: flex;
  flex-direction: column;
  top: 0;
  left: 0;
  bottom: 0;
  max-width: 20rem;
  width: 100%;
  padding: 1.5rem 1rem;
  z-index: 2;
  overflow-y: auto;
  color: #252a32;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.24);
  transform: translate3d(-100%, 0, 0);
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.header .navbar .menu-block {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 3rem;
}
.header .navbar .menu-link {
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: inherit;
  text-transform: uppercase;
  transition: color 0.35s ease-out;
}
.header .navbar .menu-link:hover {
  color: #d32f2f;
}
.header .navbar .menu-item {
  position: relative;
}
.header .navbar .menu-item a {
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: inherit;
  text-transform: uppercase;
  padding: 0.5rem 1rem;
  display: block;
  color: #252a32;
  transition: color 0.35s ease-out;
}
.header .navbar .menu-item a:hover {
  color: #d32f2f;
}
.header .navbar .menu-item.has-collapsible {
  position: relative;
}
.header .navbar .menu-item.has-collapsible .menu-child {
  display: none;
}
.header .navbar .menu-item.has-collapsible .menu-child .menu-child-item a {
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: inherit;
  padding: 0.25rem;
  color: #252a32;
  padding-left: 2.5rem;
  text-transform: uppercase;
  transition: color 0.35s ease-out;
}
.header .navbar .menu-item.has-collapsible .menu-child .menu-child-item a:hover {
  color: #d32f2f;
}
.header .navbar .menu-item.has-collapsible span::after {
  font-family: "Material Icons";
  content: "\2B9A";
  font-size: 1.5rem;
  font-weight: 400;
  line-height: inherit;
  position: absolute;
  top: 0.15rem;
  right: 1rem;
  color: #252a32;
  transition: all 0.35s ease;
}
.header .navbar .menu-item.has-collapsible span::after:hover {
  color: #d32f2f;
}
.header .navbar .menu-item.active.has-collapsible .menu-child {
  display: block;
  transition: all 0.35s ease;
}
.header .navbar .menu-item.active.has-collapsible span::after {
  transform: rotate(90deg);
}

Step6:Now we’ll add responsiveness to the page and specify the two maximum screen widths (900 and 500 px) If the screen size is equal to or less than the specified width, the image size will be adjusted in accordance with the specified height and width.

50+ HTML, CSS & JavaScript Projects With Source Code

@media screen and (max-width:900px){
  img{
    width: 90%;
    height: 500px;
    margin: 10px 30px;
    background-color: #d32f2f;
  }
}
@media screen and (max-width:500px){
  img{
    width: 70%;
    height: 300px;
    margin: 10px 30px;
    background-color: #d32f2f;
  }
}

Now we have completed our css code and below👇here is the output after styling our webpage.

Step3: Javascript code For Sidebar Dropdown Menu:-

Even after applying the CSS and HTML, our button does not work and does not open our sidebar. This is due to the fact that functionalities to any HTML element can only be added through Javascript, and we have not yet added Javascript code.

When I click the button, we’ll use some fundamental Javascript concepts to tag and style the element with JS.

const openMenu = document.querySelector(".open-menu");
const closeMenu = document.querySelector(".close-menu");
const menuWrapper = document.querySelector(".menu-wrapper");
const hasCollapsible = document.querySelectorAll(".has-collapsible");

// Sidenav Toggle
openMenu.addEventListener("click", function () {
    menuWrapper.classList.add("offcanvas");
});

closeMenu.addEventListener("click", function () {
    menuWrapper.classList.remove("offcanvas");
});

// Collapsible Menu
hasCollapsible.forEach(function (collapsible) {
    collapsible.addEventListener("click", function () {
        collapsible.classList.toggle("active");

        // Close Other Collapsible
        hasCollapsible.forEach(function (otherCollapsible) {
            if (otherCollapsible !== collapsible) {
                otherCollapsible.classList.remove("active");
            }
        });
    });
});

In our JavaScript code, we first define four constant variables that will be used to store the value of the selected element using document.queryselector by their class. Now we’ll add the functionality; we’ve added an event listener that will listen for the click event. When the user clicks on the navbar, it checks to see if the selected element has an offcanvas class; if not, it will add that class to the navbar, and vice versa.

Now will we add the functionality to our dropdown menu here we have check whether dropdown menu have the collapsible class active or not if not it will active that class by click event . basically it will toggle between whether the class is active or not.

We now have the functionality in our sidebar drop-down menu. Let’s watch a quick video to see how it works.

Output:

Now We have Successfully created our Responsive Sidebar Dropdown Menu poject. You can use this project for your personal webpage and We hope you understood the project , If you any doub’t feel free to comment!!

If you find out this Blog helpful, then make sure to search code with random on google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.

Follow: @codewithrandom

Written By : @arun

FAQs:-