Build A Responsive Sidebar Menu in HTML, CSS, & Javascript - Beginner

In this video I build out a fully responsive collapsible sidebar menu using HTML, CSS, and about 4 lines of Javascript. This is a beginner level project great if you are learning web development!

🔥 Hostinger🔥

ZeroTo Mastery:

💻 Solve EDABIT coding challenges - BEGINNER! 💻

🔥 Connect with me on IG 🔥

☕ Support the channel ☕

🔥 My Coding Equipment 🔥

Icons used from Box Icons

[SaintHanappi]

Jesus Christ, absolutely stunning as a beginner. Thank you so much, for your extraordinary and well explained content.

[aboutselphy]

awesome sidebar :) but i would chage all the PX stylings into Rem

for people with scrolling problems:
insteat of position: absolute use fixed.


for the tooltips also dont use position, top, left and transform.

move the tooltip span into the <a> and in css just add margin-left: 1rem;

[zedolok]

man i was searching for something like this, you have no idea how long i search and now i finally learn, i am learning on my own tks man god bless you

[geovanyhernandez]

Slight modification that I did to the styling for my specific use case.

Since we are setting the nav-item name's opacity to 0, when collapsed, hovering above its position will trigger the tooltip.
This took care of that:

.sidebar .nav-item {
display: none;
}

.sidebar.active .nav-item {
display: inline-block;
}

My nav-item texts are long, so when the tooltip was being triggered, it would keep the 80px as width and increasing the width would increase all the tootips.
This will help with the dynamic width, plus it helped with alignment:

.sidebar ul li .tooltip {
position: fixed;
...
display: none;
}

.sidebar ul li:hover .tooltip {
display: inline;
}

Hope this helps anyone who was experiencing the same issues!

[antoniogomezruiz]

Man this tutorial is awesome! Currently I did a backend application, and I am not very familiar to the frontend development, therefore my server looks awful... But with this tutorial my server looks much much better in an instant. I´ve learned a lot with this video about div, classes and ids, now I am testing new views, thanks a lot again!!

[AmazingCreationsStudio]

lot's tutorial on this topic.. but unique in this channel is that with voice guide.. which is very important and also helpful..

[AWAS_S]

Nice explanation sir


❤thanks for sharing

[mr_professor_x]

Your explanations were very clear. Thank you! Can't wait to see more tutorials on your channel. ❤❤ Love from India..

[sharumathi]

Nice and clean Explanation, thanks for your efforts

[iclx]

When i go to another site and the sidebar is not active, or the other way, how can i keep it?

[seancurrie-chicago]

I'd love to see how to make this kind of side bar in react. I've tried recreating and think im close. But would love to see how you do it.

[peterbridge]

Being a very beginner this is just what i was looking for!
However can't get de script working when clicking on btn

[AmitKumar]

Can you please extend this for mobile view, where sidebar will open on top of main content

[kelubboy]

Awesome work

How do I add a toogle button??

[basse]

Great. How do we add pages though for each one?

[yzctsyl]

Do u plan doing that in react js it would be perfect. Also u can show method how to integrate these components irl projects.

[BroGame]

Hey hi, I have a website which is made by html css and js but I want to show that website in desktop view for all devices. Will you plz make a video on this topic or can you please share the code of desktop view for all devices.

[arillavigne]

Thanks for the tutorial bro!

One question, how to make a dropdown on the sidebar?

[niteshprajapat]

youbare awesome.... ❤️🔥
please bring big reactjs project which covers everysingle concept of reactjs 🔥

[manjunathmyaleshi]

​ @Code Commerce if side menu scroll added in the sense pop-up values are hiding behind the screen can you please help me regarding this?