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

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

Hello readers, Today in this blog you’ll learn how to create a Side Menu Bar with a sub-menu using HTML CSS & JavaScript. Earlier I have shared a Side Navigation Menu Bar without a sub-menu, but my viewers requested me many times to create a Side Bar Menu with a submenu, now it’s time to create a Side Menu Bar with a 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 by 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).

Video Tutorial of Side Menu Bar with Submenu

 
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.

Sidebar Menu with Drop-down Menu [Source Codes]

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.

<!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>
      <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">
            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>

Second, 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.

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

That’s all, now you’ve successfully created a Side Menu Bar with a sub-menu using HTML CSS & Javascript. If your code doesn’t work or you’ve faced any errors/problems then please download the source code files from the given download button. It’s free and a .zip file will be downloaded then you’ve to extract it.

 

Previous articlePopup Subscription Form using HTML CSS & Javascript
Next articleGlowing Effects on CSS Buttons using HTML & CSS

RELATED ARTICLESMORE FROM AUTHOR

30 COMMENTS

  2. Thanks for sharing but has a bug on what is selected and highlighted. Unless you are allowing a user to view multiple screens at the same time in the main panel, which I doubt. All other menus/sub menus should no longer be highlighted – you should only have one active navigation panel/menu item at a time.

  5. Can you tell me how to close the sidebar when clicking outside it.
    And how to make background blur when opening the sidebar.
    Thanks for your help.

  13. Hi guy! already thank you for your work it's great! I am working with your menu for a school project and I found a small bug when you select a submenu and then another menu, this one remains active. So I added this line which seems to correct everything.
    $('nav ul li').click(function(){
    $('nav ul li').removeClass("active");
    $(this).addClass("active").siblings().removeClass("active");
    });

  15. Waaaouh thank you for your tutorial and the source files really I become strong day by day because of you, It is possible to have tutorials for creating a complete website as you would like or we can put things on your site, I am without pres in CSS e JS I want to attack PHP;)

LEAVE A REPLY

Please enter your comment!
Please enter your name here