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.
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?
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:
Responsive Side Navigation Bar [Source Code]
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:
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.
this is legit and impressive
ReplyDeleteThank you so much for provide source code and download file
ReplyDeleteYou are always welcome
DeleteHow much time did it take you to learn all these things! Fan bro!
ReplyDeleteAll time.
DeleteThanks for inspection
ReplyDeleteYou are always welcome
Deletedude you're the best
ReplyDeleteThank a ton. Best regards!!
DeleteThanks for source code
ReplyDeleteYou are welcom. Best regards!!
Deletegreat work
ReplyDeleteYou are welcome. Best regards!!
Deletethank you for this one
ReplyDeleteYou are welcom. Best regards!!
DeleteThanks for this bro. Can I use your source code in my project?
ReplyDeleteYeah you can
Deletewhen adding tag a to the logout button, it's broken
ReplyDeleteYou can DM me on instagram or facebook.
DeleteWhen using tag a to the logout button, it's broken
ReplyDeleteIs there any way to fix it?
Anyway, thank you for the source code!
Thank you
ReplyDeletePlease, 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
ReplyDeleteYou can add content from HOme content.
DeleteThank you
ReplyDeleteHey if i enter the page the sidebar is closed by default kow can i make this open on enter this page ?
ReplyDeleteJust add open classs in the HTML tag of the sidebar.
DeleteWoW Blogguer
ReplyDeleteGlad you like it. Best regards!!
DeleteGreat work. Have been looking for an example along these lines.
ReplyDeleteGlad you like it. Best regards!!
Deletethank you! JAH BLESS
ReplyDeleteYour are welcome. Best regards!!
Deletehi
ReplyDeletethe 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
plz notify me if possibe on the solution , contactwiseminds@gmail.com
ReplyDeletethankyou
Is there a word better than AMAZING?
ReplyDeleteGlad you like it. Best regards!!
Deletecan you make it responsive on mobile too?
ReplyDeletecan u make it for blogger?
ReplyDeleteIt's wonderful 💓
ReplyDeleteGlad you like it. Best regards!!
Deletebuttons not working
ReplyDeleteYet source code is available but I followed your YouTube tutorial for this but thanks dear so much I'm also available to give donation ☺
ReplyDeleteIt's okey Akash. It's my peasure to help you. Just share my work.
DeleteSzuper,köszönöm szépen!
ReplyDeleteSuper,thank you!
Greetings from Hungary
You are always welcome.
Deletethank you so much, i will work for that
ReplyDeleteYou are always welcome.
DeleteThank for your code , it realy nice....
ReplyDeleteYou are always welcome.
DeleteFirstly thank you very much for this lovely sibar.
ReplyDeleteThe toogle doesn't expand. Could you please help me? Thanks
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
ReplyDeleteSorry, I didn't get you.
Deletehello I have a problem, can you help?
ReplyDeletei 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?
hello I have a problem, can you help?
ReplyDeletei 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?
hello I have a problem, can you help?
ReplyDeletei 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?
Dm me on facebook or instagram.
DeleteI've got the same problem, could u solve it ?
Deleteشكراً جزيلا ..Thaaaaaaaaaaaaaaaaaaaaanks
ReplyDeletegood
ReplyDeletethank you for the source code.
ReplyDeleteand how can i add a toogle button to the dashboard buttons when i click it should open new buttons bar
Wow it is awesome! I also made a different one like that
ReplyDeleteHi, thank you for the source code. I ported this to VUE.js.
ReplyDeletehttps://www.npmjs.com/package/vue-sidebar-menu-akahon
So much thankyou sir ..it helped me alot in my project
ReplyDeletethanks for such effort
ReplyDeleteRESPECT and thanks
ReplyDeletehow change te icons?
ReplyDeletehow change te images?
ReplyDeletethanks
ReplyDeletethank you so much have learned a lot on side menu
ReplyDeletehi, i have a problem with another buttons like messages and more cause i can see only Dashboard. I dont know why.
ReplyDeletehelp would be greatly appreciated: D
Please add the top menu in this sidebar and complete the dashboard with data table and form...
ReplyDeletePlease add the top menu in this sidebar and complete the dashboard with data table and form...
ReplyDeletePost a Comment
We welcome relevant and respectful comments. Off-topic or spam comments may be removed.