You are currently viewing Create Sidebar Dropdown Using HTML CSS & JavaScript
Create Sidebar Dropdown Using HTML CSS & JavaScript

Create Sidebar Dropdown Using HTML CSS & JavaScript

How To Create Sidebar Dropdown Using HTML CSS & JavaScript

Today in this blog you’ll learn how to create a Sidebar Dropdown Using HTML CSS & JavaScript. This sidebar design includes a sub-menu.

Today in this blog, I’ll share with you this program (Sidebar Dropdown). At first, there is only a button and this sidebar menu is hidden. But when you clicked on that button then this sidebar will be shown by sliding from the left side. In the menus, there is a cool hover effect too.

HTML CODE

<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8" />
    <title>Sidebar Dropdown Using HTML CSS & JavaScript.</title>
    <link rel="stylesheet" href="style.css" />
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>

    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
    />
  </head>
  <body>
    <div class="btn">
      <span class="fas fa-bars"></span>
    </div>
    <nav class="sidebar">
      <div class="text">Sidebar Dropdown</div>
      <ul>
        <li class="active"><a href="#">Dashboard</a></li>
        <li>
          <a href="#" class="feat-btn"
            >Features
            <span class="fas fa-caret-down first"></span>
          </a>
          <ul class="feat-show">
            <li><a href="#">Pages</a></li>
            <li><a href="#">Elements</a></li>
          </ul>
        </li>
        <li>
          <a href="#" class="serv-btn"
            >Services
            <span class="fas fa-caret-down second"></span>
          </a>
          <ul class="serv-show">
            <li><a href="#">App Design</a></li>
            <li><a href="#">Web Design</a></li>
          </ul>
        </li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Overview</a></li>
        <li><a href="#">Shortcuts</a></li>
        <li><a href="#">Feedback</a></li>
      </ul>
    </nav>
    <div class="content">
      <div class="header">Sidebar Dropdown Using HTML CSS & JavaScript.</div>
    </div>
    <script>
      $(".btn").click(function () {
        $(this).toggleClass("click");
        $(".sidebar").toggleClass("show");
      });
      $(".feat-btn").click(function () {
        $("nav ul .feat-show").toggleClass("show");
        $("nav ul .first").toggleClass("rotate");
      });
      $(".serv-btn").click(function () {
        $("nav ul .serv-show").toggleClass("show1");
        $("nav ul .second").toggleClass("rotate");
      });
      $("nav ul li").click(function () {
        $(this).addClass("active").siblings().removeClass("active");
      });
    </script>
  </body>
</html>

HTML OUTPUT

Create Sidebar Dropdown Using HTML CSS & JavaScript
Create Sidebar Dropdown Using HTML CSS & JavaScript

 

To create this program (Side Menu Bar with sub-menu). First , you need to create two files one HTML File and another one is CSS File. After creating these files just paste the following codes in your file. First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.

50+ Html ,Css & Javascript Projects With Source Code

A drop-down menu is a horizontal list of menu options that each contain a vertical menu. When you hover or click one of the primary options in a drop-down menu, a list of choices will “drop down” below the main menu. The most common type of drop-down menu is a menu bar or Navigation Menu bar.

 

You Might Like This:

CSS CODE

* {
  margin: 0;
  padding: 0;
  user-select: none;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
.btn {
  position: absolute;
  top: 15px;
  left: 45px;
  height: 45px;
  width: 45px;
  text-align: center;
  background: #1b1b1b;
  border-radius: 3px;
  cursor: pointer;
  transition: left 0.4s ease;
}
.btn.click {
  left: 260px;
}
.btn span {
  color: white;
  font-size: 28px;
  line-height: 45px;
}
.btn.click span:before {
  content: "\f00d";
}
.sidebar {
  position: fixed;
  width: 250px;
  height: 100%;
  left: -250px;
  background: #1b1b1b;
  transition: left 0.4s ease;
}
.sidebar.show {
  left: 0px;
}
.sidebar .text {
  color: white;
  font-size: 25px;
  font-weight: 600;
  line-height: 65px;
  text-align: center;
  background: #1e1e1e;
  letter-spacing: 1px;
}
nav ul {
  background: #1b1b1b;
  height: 100%;
  width: 100%;
  list-style: none;
}
nav ul li {
  line-height: 60px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
nav ul li:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
nav ul li a {
  position: relative;
  color: white;
  text-decoration: none;
  font-size: 18px;
  padding-left: 40px;
  font-weight: 500;
  display: block;
  width: 100%;
  border-left: 3px solid transparent;
}
nav ul li.active a {
  color: cyan;
  background: #1e1e1e;
  border-left-color: cyan;
}
nav ul li a:hover {
  background: #1e1e1e;
}
nav ul ul {
  position: static;
  display: none;
}
nav ul .feat-show.show {
  display: block;
}
nav ul .serv-show.show1 {
  display: block;
}
nav ul ul li {
  line-height: 42px;
  border-top: none;
}
nav ul ul li a {
  font-size: 17px;
  color: #e6e6e6;
  padding-left: 80px;
}
nav ul li.active ul li a {
  color: #e6e6e6;
  background: #1b1b1b;
  border-left-color: transparent;
}
nav ul ul li a:hover {
  color: cyan !important;
  background: #1e1e1e !important;
}
nav ul li a span {
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  font-size: 22px;
  transition: transform 0.4s;
}
nav ul li a span.rotate {
  transform: translateY(-50%) rotate(-180deg);
}
.content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #202020;
  z-index: -1;
  text-align: center;
}
.content .header {
  font-size: 45px;
  font-weight: 600;
}
.content p {
  font-size: 30px;
  font-weight: 500;
}

Now create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

How do I add a dropdown to the sidebar?

Sidebar means the section on the website that is located on the right or left side with some important navigation links and the user can open or close it. Dropdown menu means that sub-menu or nav links which are hidden in very first but when user do hover or click on the main nav link then sub-menu appears.

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

With the implementation in this tutorial, we can add as many menus and submenus in the data file and the multilevel dropdown magically appears in the frontend. However, we should be mindful of the levels of dropdowns we add so that users don’t see it as annoying.

If you have questions and or contributions, I’m in the comment section. And if you like this Blog, ensure you share it around the web.

Final Output 

Sidebar Dropdown Using HTML CSS & JavaScript
 Sidebar Dropdown Using HTML CSS & JavaScript

 

Sidebar Dropdown Using HTML CSS & JavaScript
Sidebar Dropdown Using HTML CSS & JavaScript

 

If you enjoyed reading this Sidebar Dropdown Using HTML CSS & JavaScript post and have found it useful for you, then please give a share with your friends, and follow me to get updates on my upcoming posts. You can connect with me on Instagram.

if you have any confusion Regarding this blog Comment below or you can contact us by filling out our contact us form from the home section.

written by – Ninja_webTech

Leave a Reply