Side Navigation Bar in HTML CSS & JavaScript

Hello all of you, welcome to my other blog of Responsive Side Navigation Bar. Today in this blog will learn how to create a Responsive Sidebar Menu using HTML CSS and Javascript. I have been designing and writing several video tutorials and articles related to Responsive Navigation Menu using  HTML and CSS, but today, we will also add JavaScript code.

A sidebar is the combination of various navigation links that align on the web page's right or left side and helps to faster move from one web page to another to the users. The main purpose to create a sidebar is for small sizes screen devices like tablets, mobile.

There is only one difference between the side navigation bar and the navigation bar is, the navigation bar is a large screen size device like a laptop, computer, and side navigation from small sizes devices. Actually, we convert the navigation menu to the side navigation menu.

$ads={1}

I have uploaded one image of the side navbar design that we are going to create. We can include or add various navigation links, logos,s and social media icons inside the sidebar. To make the sidebar fixed while scrolling we just add the following codes:
  • position: fixed;
  • left or right: 0px; (where you want to keep)
  • top: 0px;
  • height: 100vh;
  • width: as your need for example: 250px;


To see the real demo of this animated dashboard side navbar and all the code that I have used to create this type of sidebar, you need to watch the full video tutorial of this programming that I have given below. 

Side Navigation Bar in HTML CSS & JS | Video Tutorial


Before jumping into the source code of this program [Side Navigation Bar in HTML CSS & JavaScript], let's talk about some important topics of our sidebar menu.

As you have seen on the given tutorial of this dashboard sidebar menu. At first, it is in closed form, and we can only see the logo icon, navigation link's icon, and logout icon, but when I hovered that the navigation logo icon small tooltip appears smoothly at the right side of that icon which helps the user to identify the name of that nav links. 

When I opened the sidebar the tooltip disappears and the nav the links' background color appears, we can also see the logo name and profile image. Have you noticed we can open this sidebar by clicking on the toggle button and search icon?

$ads={2}

This is the piece of cake for those who have basic knowledge of HTML CSS & JavaScript but for those friends who are feeling difficult to create this side navigation, I have provided free source code files below. 

You May Like This:

To create Responsive Side Navigation Bar, follow the given steps line by line:

1. Create a folder. You can put any name in this folder and create the below-mentioned files inside this folder.

2. Create an index.html file. The file name must be index and its extension .html

3. Create a style.css file. The file name must be style and its extension .css

Once you create these files, paste the given codes into the specified files. If you don’t want to do these then scroll down and download the Responsive Side Navigation bar by clicking on the given download button.

First, paste the following codes into your index.html file.

HTML CODE:

$ads={1}

Second, paste the following codes into your style.css file.

CSS CODE:

That’s all, now you’ve successfully created a project on Responsive Side Navigation Ba. If your code doesn’t work or you’ve faced any problems, please download the source code files from the given download button. It’s free and a zip file containing the project folder with source code files will be downloaded.


72 Comments

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

  1. Thank you so much for provide source code and download file

    ReplyDelete
  2. How much time did it take you to learn all these things! Fan bro!

    ReplyDelete
  3. Thanks for this bro. Can I use your source code in my project?

    ReplyDelete
  4. when adding tag a to the logout button, it's broken

    ReplyDelete
  5. When using tag a to the logout button, it's broken
    Is there any way to fix it?

    Anyway, thank you for the source code!

    ReplyDelete
  6. Please, it doesn't toggle to the next element, it is only on dashboard. How can i add contents to the other items other than the dasboard item

    ReplyDelete
  7. Hey if i enter the page the sidebar is closed by default kow can i make this open on enter this page ?

    ReplyDelete
    Replies
    1. Just add open classs in the HTML tag of the sidebar.

      Delete
  8. Great work. Have been looking for an example along these lines.

    ReplyDelete
  9. hi
    the side nav is impressive
    im using it in my angular prg but it doesn,t work in toggle e.t.c properly
    do i need to install any jquery, boostrap e.t.c

    ReplyDelete
  10. plz notify me if possibe on the solution , contactwiseminds@gmail.com
    thankyou

    ReplyDelete
  11. Is there a word better than AMAZING?

    ReplyDelete
  12. can you make it responsive on mobile too?

    ReplyDelete
  13. Yet source code is available but I followed your YouTube tutorial for this but thanks dear so much I'm also available to give donation ☺

    ReplyDelete
    Replies
    1. It's okey Akash. It's my peasure to help you. Just share my work.

      Delete
  14. Szuper,köszönöm szépen!
    Super,thank you!
    Greetings from Hungary

    ReplyDelete
  15. thank you so much, i will work for that

    ReplyDelete
  16. Thank for your code , it realy nice....

    ReplyDelete
  17. Firstly thank you very much for this lovely sibar.
    The toogle doesn't expand. Could you please help me? Thanks

    ReplyDelete
  18. hi please do i need to add anything before using this code. i can see it same as i see them in the video. please help

    ReplyDelete
  19. hello I have a problem, can you help?
    i added .sidebar {
    overflow-y: auto;
    overflow-x: hidden;}
    if it is opened on the smart phone screen in landscape condition. The problem is that the content-profile div is not under the sidebar, but in the middle of the sidebar and covers other menus. how to fix it?

    ReplyDelete
  20. hello I have a problem, can you help?
    i added .sidebar {
    overflow-y: auto;
    overflow-x: hidden;}
    for the condition if it is opened on the smart phone screen in landscape condition. The problem is that the content-profile div is not under the sidebar, but in the middle of the sidebar and covers other menus. how to fix it?

    ReplyDelete
  21. hello I have a problem, can you help?
    i added .sidebar {
    overflow-y: auto;
    overflow-x: hidden;}
    if it is opened on the smart phone screen in landscape condition. The problem is that the content-profile div is not under the sidebar, but in the middle of the sidebar and covers other menus. how to fix it?

    ReplyDelete
  22. شكراً جزيلا ..Thaaaaaaaaaaaaaaaaaaaaanks

    ReplyDelete
  23. thank you for the source code.
    and how can i add a toogle button to the dashboard buttons when i click it should open new buttons bar

    ReplyDelete
  24. Wow it is awesome! I also made a different one like that

    ReplyDelete
  25. Hi, thank you for the source code. I ported this to VUE.js.
    https://www.npmjs.com/package/vue-sidebar-menu-akahon

    ReplyDelete
  26. So much thankyou sir ..it helped me alot in my project

    ReplyDelete
  27. thank you so much have learned a lot on side menu

    ReplyDelete
  28. hi, i have a problem with another buttons like messages and more cause i can see only Dashboard. I dont know why.
    help would be greatly appreciated: D

    ReplyDelete
  29. Please add the top menu in this sidebar and complete the dashboard with data table and form...

    ReplyDelete
  30. Please add the top menu in this sidebar and complete the dashboard with data table and form...

    ReplyDelete

Post a Comment

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

Previous Post Next Post

AdBlock Detected