You are currently viewing Create Sidebar Dropdown Menu using HTML , CSS And Javascript

Create Sidebar Dropdown Menu using HTML , CSS And Javascript

Hello Readers!!Today we will learn how to make a responsive sidebar Sidebar Dropdown Menu menu with HTML, CSS, and JavaScript.

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

The term “sidebar” refers to a section of a website on the right or left side that contains important navigation links that the user can open or close. A “dropdown” menu is similar to a list of options, but it is hidden within a button or another element, and when the user clicks on the button, the dropdown menu appears. In today’s blog, we’ll look at how to create a sidebar dropdown menu with HTML, and JavaScript.

Sidebar Dropdown Menu HTML CSS JS
Sidebar Dropdown Menu PREVIEW

 

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

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>

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

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;
  }
}

 

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

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.

@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.

Sidebar Dropdown Menu HTML CSS
Sidebar Dropdown Menu HTML CSS

 

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.

Written By : @arun

Leave a Reply