How to Create a Collapsible Navigation Menu - HTML, CSS & JavaScript Tutorial
Рет қаралды 22,771
4 жыл бұрынLink to source code:
codepen.io/dcode-software/pen...
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:
google.github.io/material-des...
Support me on Patreon:
/ dcode - with enough funding I plan to develop a website of some sort with a new developer experience!
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 3 жыл бұрын
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.
@dtawantawng5131 2 жыл бұрын
So cool! Really happy with the final result! Thank you dcode (:
@CoderArchive 4 жыл бұрын
Great content! This is useful and can be a good design choice for portfolio navigation bars 👏
@KostaTsourdalakis 4 жыл бұрын
Yessirrr quality content 💓
@MaxProgramming 4 жыл бұрын
I wanted to learn it. This is a really nice tutorial. Thanks a lot!
@dcode-software 4 жыл бұрын
No probs!
@tatemo_labs 3 жыл бұрын
Wow! awesome tutorial! Subscribed. Thank you!
@dcode-software 3 жыл бұрын
Awesome!
@godriceeichie Жыл бұрын
God bless you it was very detailed thank you very much
@fallofmanbrand 4 жыл бұрын
great content bro
@Robd515 4 жыл бұрын
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
@CodeBlocksOfficial 3 жыл бұрын
Really great tutorial, u earned a sub from me!
@raymondc5874 4 жыл бұрын
Amazing stuff
@israelblessing Жыл бұрын
Thank you
@JackOfTrades12 2 жыл бұрын
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!
@dcode-software 2 жыл бұрын
Awesome 🙂 happy to help
@recklessroges 4 жыл бұрын
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.)
@DJxMaster2 Жыл бұрын
I really like to colors you chose for the vs code look, whats it called?
@4541047 4 жыл бұрын
Hi Dom, can you please upload the code for the websocket toturial? the with the json validation and the rest? thanks!!
@Siddharth-yi7pg 3 жыл бұрын
How to dtnamically change size as per resizing?
@paulmoldovan9518 4 жыл бұрын
Hi. Verry good explained. But how if two list items have a dropdown menu and every opened dropdown closed the preview if is open?
@dcode-software 4 жыл бұрын
That would have to be a seperate video, the solution would work either way
@paulmoldovan9518 4 жыл бұрын
@@dcode-software That would be verry good. Im waiting for. Thx
@Alphadec 4 жыл бұрын
why use javascript for something so elementary as a toggle!. ? this can be done with CSS!
@dcode-software 4 жыл бұрын
I explained in the video - it's simpler and you can use it so save your previous state of toggle using Local Storage