Responsive Dropdown Sidebar Menu using HTML CSS and JavaScript | Side Navigation Bar

In this video, You will learn to create a Responsive Dropdown Sidebar Menu or Side Navigation Menu Bar. When you click on the dropdown icon of this sidebar menu its submenu will appear. Also, I have added a tooltip box that appears when the sidebar is in closed status. I have provided all the source code links below.

🗂️ Get Source Code of this Sidebar with Dropdown Menu

🌐 Visit CodingNepal for helpful coding projects

⭐ Hire me on Fiverr

📷 Follow me on Instagram

🤝 Support my work with a coffee

Timestamps:
00:00 Dropdown Sidebar Menu | Demo
01:42 How to make a dropdown sidebar in HTML?
02:07 How to make icons in HTML?
02:38 How to change the font in CSS?
03:36 How to make sidebar fixed
09:07 How to add a submenu in the sidebar?
11:04 How to make a tooltip for the sidebar?
19:20 Make a profile and add a photo on the sidebar
23:52 JavaScript code for sidebar dropdown
28:49 How to make dashboard sidebar menu

#DropdownMenu #SidebarMenu #HTMLCSSJS #javascripttutorial

---

Music Credit:
Ikson - Lights [Official]

Song: Ikson - Anywhere (Vlog No Copyright Music)

Song: DayFox - Lioness (Vlog No Copyright Music)

Song: Jarico - Island (Vlog No Copyright Music)

Track: Jimmy Hardwind - Want Me (feat. Mike Archangelo)

Track: Lost Sky - Vision [NCS Release]

Song: Ehrling - You And Me (Vlog No Copyright Music)

[CodingLabYT]

If you got any queries related to this tutorial, please let me know.

[englishlearn]

Many YouTubers sell their project's source code, but you provide us free source code of every tutorial.. Thank you so much bruh.

[thieleslopespossa]

A 3 anos atrás eu pensei em um menu dessa forma, por não conseguir dominar programação nunca me arrisquei a fazer, ficou top demais!

[dryhail]

Thanks!

Saves me an hour plus of work. You rock! thumbs up.

[haldharpatel]

This is some serious detailing which I couldn't have think of, thanks for this masterpiece 😍

[jjjessee]

Very educational. I'm relatively new with HTML/CSS, but was able to type along and complete a working model though it was challenging. Your layout asthetic is superb and your CSS code very well organized and easy to learn from. My next challenge will be to adapt this model to a website I'm creating for myself. I'm sure I will be back to this instruction many times before I might be able to gain a full mastery of these concepts. Thank you very much.

[MohsenAlirezaeian]

This sidebar menu is one of the best sidebars that i know so far

But there is two important UX hints that make this sidebar menu to a most premium and modern sidebar menu.

1. Place the hamburger menu button icon on the left of sidebar, so when you click to collapse or expand the sidebar, there is no need to move the mouse cursor on the left or right to close or open the sidebar.

2. Another important hint is when you click on arrow to show or hide the drop-down of every part, it will be better if the previous opened drop-down be closed, i mean for a better User Experience you can set the drop-downs to only one of them be opened at the same time and just when clicked on the another drop-down, the previous opened drop-down become closed.


i was planning to design a sidebar menu for my website panel, but your lovely and professional sidebar menu made me Surprised 😍👏

[delidoluadam]

One of the best designs I've ever seen. However, you should also add the following to your project.

1: Light/Dark theme
2: Topbar for Language selector, full screen, search bar, profile etc.

[IITianTaniya]

Many YouTubers sell their project's source code, but you provide us free source code of every tutorial.. Thank you so much bruh.😊

[englishmaster]

You got a sub brother. You saved my 1 hour. Thanks and I am grateful to you

[KratosMAISTER]

Followed through your tutorial step by step and there was a bug you also noticed and fixed at 37:07 . Hats off and kudos to you sir for such an amazing tutorial and sharing of knowledge, i have learnt so much in terms of CSS coding.

[manuelcaceres]

Excellent!! This is that I was looking for

[camvan]

Great job!! Keep moving forward!! <3

[arctic_tea.]

I'm getting into programming and this helped me so much, thank you! The only thing I don't really understand is
.sidebar.close ~ .home-section
it all works except this one and I can't understand why.

[jobdominic]

So much thanks man, I really appreciate it. It is good that something like this exist that helps beginners like me. Thanks!

[mearn_ctaftsman]

Hello brother, this is really awesome.
Really pity on me, I didn't see your channel till today.
Just subscribed now :)

[asfandyar_ali]

Thanks and Excellent. Loved the way you teach. We expect more to come. God bless you dear :)

[geovannygonzalez]

is what I was looking for for my very good Dashboard ❤

[lakshsinghania]

Hi there, this is really cool and amazing.
i have never seen this type of creativity like its really good
Just subscribed now & i learned a lot from this video :)

[gabrielgomes]

Thank you, I learned so much html and css from your video