Side Menu Bar with sub-menu

May 13, 2020

Hello readers, Today in this blog you'll learn how to create a Side Menu Bar with sub-menu using HTML CSS & JavaScript. Earlier I have shared a , but my viewers requested me many times to create Side Bar Menu with submenu, now it's time to create Side Menu Bar with submenu or dropdown menu. 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. Today in this blog, I'll share with you this program (Side Menu Bar with sub-menu). 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 from sliding from the left side. In the menus, there is a cool hover effect too. That means when you hovered on the specific item, a small line will appear on the left side of that list, and also the color of that item becomes cyan as you can see in the image. If you're feeling difficult to understand what I am saying. You can watch a full video tutorial on this program (Side Menu Bar with sub-menu).

I hope you've understood the basic codes of this sidebar and I believe this video helped the beginners to understand the codes and concepts behind creating the sidebar menu. You can use this Sidebar on your websites, projects, and anywhere you want. If you like this program (Side Menu Bar with sub-menu) and want to get source codes. You can easily get the source codes of this program. To get the source codes you just need to scroll down.

You might like this:

<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Sidebar Menu with sub-menu | CodingNepal</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
  </head>
  <body>
    <div class="btn">
      <span class="fas fa-bars"></span>
    </div>
<nav class="sidebar">
      <div class="text">
Side Menu</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 Menu with sub-menu</div>
<p>
HTML CSS & Javascript (Full Tutorial)</p>
</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>

CSS FILE:

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  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;
}

PreviousFrontend Tutorials & Example NextCreate Simple CPU Monitor App

Last updated 4 years ago

Was this helpful?

Side Menu Bar with sub-menu using HTML CSS & Javascript

You might like this:

As always, before sharing the codes of this program (sidebar menu with the dropdown menu). Let's a few talk about the main tags and codes of this program. At first, in the HTML File, I created a <nav> with the class name "sidebar " and placed all tags inside it. This is a <ul> <li> based program so we can create menu list easily. Then I created <ul> tag I placed all <li> tags inside it. Inside <li> tag I created <a> anchor tag. To create those submenu I created <ul> tags inside <li> tags. As you can call it nested tags. In the CSS File, first I did basic styling to navbar like gave colors, height-width, padding, etc. After styling the navbar I placed all menu items and sub-menu items vertically. Then I hide all submenu items and also hide the sidebar with sliding -260px to the left slide. On the screen there I have shown only the menu button for show sidebar when this button clicked. In the jQuery File, I created a click function and show that hidden Sidebar menu on button click. jQuery click event occurs when you click on an HTML element. jQuery click() method is used to trigger the click event. For example $(“p”). click() will trigger the click event when a paragraph is clicked on a document (a web page). 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 these following codes in your file. You can also download the source code files through the given link. HTML FILE:

<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Sidebar Menu with sub-menu | CodingNepal</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
  </head>
  <body>
    <div class="btn">
      <span class="fas fa-bars"></span>
    </div>
<nav class="sidebar">
      <div class="text">
Side Menu</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 Menu with sub-menu</div>
<p>
HTML CSS & Javascript (Full Tutorial)</p>
</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>

CSS FILE:

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  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;
}

Reference :

Side Menu Bar with sub-menu