Dropdown Sidebar Menu

Hello readers, today we are going to learn to create a Responsive Dropdown Sidebar Menu using HTML CSS, and JavaScript. If you want this sidebar design without a dropdown menu, you can visit this link: Responsive Sidebar Menu.

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.

There are various ways to create a drop-down navigation menu. I think the following are the best and easy ways:


In HTML:
Make <ul> </ul> tag as a parents for the main navigation links.
Inside the <ul> </ul> tag add <li> </li> tag like this <ul><li>Home</li></ul>
Now for submenu add  <ul> </ul> tag again inside the <li> </li> like this:
<ul><li>Home
 <ul>
  <li>Sub Menu</li>
  </ul>
</li></ul>
If you want to watch the real virtual demo and tutorial of this sidebar menu with a submenu then I highly recommend you to watch the given video tutorial of the dropdown. After watching the video I sure you will understand how all code works behind this design.

Dropdown Sidebar Menu in HTML CSS & JavaScript | Video



I hope you have watched the video tutorial of our drop-down side navigation bar in HTML CSS and JavaScript. As we have seen on the tutorial, first our sidebar is close and we can see an icon of navigation but when I did hover the navigation link's name and a submenu appears. When I open the dropdown sidebar menu, all navigation links' names appear, and the submenu comes at the bottom of the main navigation links.

Actually, all these are made by HTML and CSS, but I have used a little touch of JavaScript to make open and close functions. We can also make open-close functions with HTML and CSS only if you are wondering to know then on this link - Sidebar Menu using only HTML and CSS

I believe, now you guys can easily build this drop-down sidebar menu but if you are confused to make this side navigation bar then scroll down to get all source code.

You May Like This:



Dropdown Sidebar Menu | Free Source Code

Before copying the given code, you need to create two files: HTML and CSS files. After Creating these two files then you can copy-paste the following codes in your documents.

To copying the following HTML of the dropdown sidebar menu you have to create a file with the name of index.html on your computer and copy-paste the given HTML code in your HTML document.

HTML CODE:

CSS CODE:



23 Comments

We welcome relevant and respectful comments. Off-topic or spam comments may be removed.

  1. Hi CodingLab, sidebar scroll is not coming when side-bar menu items exceeds max height(overflow:auto is not working for nav-links)

    ReplyDelete
    Replies
    1. If you are facing not scrolling problem while sidebar is opened then you might have given overflow hidden. And if you closed the sidebar the scroll function would not work because I have given overflow visible for showing the tooltip or sub-menu because we have only one option either show submenu on hover or make scroll and hide submenu or tooltip.

      Delete
  2. Thank You So Much for This STUFF. :)

    ReplyDelete
  3. This is awesome. Thanks for sharing

    ReplyDelete
  4. I like this side navigation bar but i'm not sure how to move the drop down button on the side navigation bar? Tried retooling the css but no luck. How would I go about this?

    ReplyDelete
    Replies
    1. Please do watch the video tutorial then you will get all the idea.

      Delete
  5. So Amazing Bro.. You are Amazing Front end Developer..
    Lovely.. Wowww

    ReplyDelete
  6. Hello,
    first thank you so much for this - its amazing!
    But i have a problem on mobile devices the animation is a litte bit laggy... Can somebody help me please?

    ReplyDelete
  7. The drop down sidebar is not working

    ReplyDelete
  8. I want to write this with React and TypeScript, let get back for me if you allow, please.

    ReplyDelete
    Replies
    1. I was completed code, and waiting you are allow publish it.

      Delete
  9. Hi, I have a problem that tells me "parentElement does not exist in the EventTarget" and I don't know how to solve it, pls help me.

    ReplyDelete
  10. Hey
    Thanks for this video and this tutorial. It helped me a lot to understand and learn new things. I want to go further and decided to add the animation effect myself when the menu expands, but nothing works for me. Tell me how you can do it?

    ReplyDelete
  11. Could you pass me the css, from the option that when you touch something, a sub menu appears, it is that I cannot find it

    ReplyDelete
  12. Hi, thank you so much and it works perfectly!!!
    Is it possible to use this design offline? e.g. use this to develop an application and run it without the internet connection, will all the icons and functions still be there?

    ReplyDelete
    Replies
    1. All codes will work offline perfectyly. You just need to download offline font icoon only.

      Delete

Post a Comment

We welcome relevant and respectful comments. Off-topic or spam comments may be removed.

Previous Post Next Post

AdBlock Detected!

Our website is made possible by displaying ads. Please whitelist our site to download source code files. Read more

arrow-down