How to Create a Collapsible Navigation Menu - HTML, CSS & JavaScript Tutorial

Link to source code:

In today's video I'll be showing you how to create a collapsible (or minimize-able) navigation menu using plain HTML, CSS & JavaScript.

This is perfect for allowing your users to increase the amount of screen real estate while browsing your site(s).

Google Material Icons:

Support me on Patreon:

Follow me on Twitter @dcodeyt!

If this video helped you out and you'd like to see more, make sure to leave a like and subscribe to dcode!

#dcode #javascript #css

[m_v_j]

Thank you for actually making a tutorial where you speak. It felt like I had to search the entire web just to find this video.

[Robd]

Hi Dom, this was an excellent video, thank you very much. Coincidentally last Friday I just finished my portfolio website with a nav to the left, but the way you organized it here was much better so I’ll be reworking the code today thanks to this video. I’m going to watch more of your videos today from the couch.

Edit: Dom, do you happen to have a video that shows how to expand a menu link down for a sub menu? I’d like to use that in my left navbar. Thanks

[CoderArchive]

Great content! This is useful and can be a good design choice for portfolio navigation bars 👏

[godriceeichie]

God bless you it was very detailed thank you very much

[JackOfTrades]

I just reduced my code so much. Idk why i didn't think to do display: none on child items when the collapsed class is set on my nav.... it's genius! Thank you!

[recklessroges]

That works perfectly. What's your opinion on a burger-menu version? (When the menu collapses/toggles to a single icon by clicking on the icon.)

[MaxProgramming]

I wanted to learn it. This is a really nice tutorial. Thanks a lot!

[dtawantawng]

So cool! Really happy with the final result! Thank you dcode (:

[tatemo_labs]

Wow! awesome tutorial! Subscribed. Thank you!

[DJxMaster]

I really like to colors you chose for the vs code look, whats it called?

[paulmoldovan]

Hi. Verry good explained.
But how if two list items have a dropdown menu and every opened dropdown closed the preview if is open?

Hi Dom, can you please upload the code for the websocket toturial? the with the json validation and the rest? thanks!!

[CodeBlocksOfficial]

Really great tutorial, u earned a sub from me!

[Siddharth-yipg]

How to dtnamically change size as per resizing?

[Alphadec]

why use javascript for something so elementary as a toggle!. ? this can be done with CSS!