Responsive Dropdown Navigation Menu | HTML, CSS & JavaScript (JQuery + GSAP)

Hey gang, what up! Okay so this time, I have tried to keep this super simple. I used a couple of lines of JQuery to toggle submenus and a bit of GSAP to toggle and reveal that overlay. I hope this will help.

Feel free to use it in any of your projects. Also just play around with the deeper settings according your requirement. Sometimes I get great looking results by just adding minor tweaks.

I always scavenge for the perfect music to seek inspiration while creating. And thus the playlist, for all those who always hunt for the perfect music to light up and start working. Because after all music is not only about anything that sounds good to the ears but a feeling. I have been asked a lot many times to share my playlist. I have decided to share the link to my playlist which is called 2:47AM. And I'll be updating it every Saturday. Enjoy the music.

Connect with me through the journey :

You can buy subscription from here :

Thanks for watching !

[TheBorninmotion]

Super smooth, thanks for using greensock !

[vitaliisyvashchenko]

Man, dude, brother, you made my Day (actually a three weeks).
Recently I started convert my design to Html, i'm newbie and spent three weeks learning js to made my dropdown menu (it's very simmilar to that one you show in this tutorial).
Thank you very very very much!

[joahanpuc]

Why don't the links to the submenus come in with click?

[unknown_]

How can I insert a link for each submenu-items? <a href=" "> is not working

[hani]

Why don't the links work? I obviously removed # from the <a href="#">Home</a> and i put in index.html, but it doesn't go to the page?

[monsieurkone.]

J'adore ta chaîne et tes créations
Merci infiniment.

[doniyorusmonov]

super super video, Eid Mubarak from Uzbekistan )))

[THBADRO]

Nice tutorial as always. There will be just a small problem, you used opacity to hide the menu by default, and that would only hide the menu while the links will be clickable even though not visible. A workaround would be to set pointer-events property to none on the menu, and when the menu is open add a class to target it to set the pointer-events property to initial.

[anfaslimx]

How do I link html pages to the drop down menu

[muhammadhamzahali]

Love you brother ❣️ Eid Mubarak from Pakistan

[billmaragos]

great piece of code. where can I find the first audio tho ? Thanks!

[abhishekpujari]

hello, everything is working fine but when i clicked on that dropdown menu nothing happens. did i miss anything ?

[thecretor]

You did a great job brother. Please how can I make the "close-menu transition" collapse faster.

[rorh]

Hey codegrid, how do I make the menu freeze the scroll? I've added content on my page and Idk how to make the navigation menu stay still, it lets me scroll down but I just want the menu to stay in one spot on the page and not scroll down, is there any way I can fix this issue?

[marshal]

Upon clicking on the dropdown links, it slides up. Please help

[lookarious]

jQuery for dropdown menu? Seriously? I think you must to use native JavaScript because 192kb for dropdown its un normal

[nono-wcgc]

unfortunately source code is not available, dont know may be it is other country issue, but if you can and if you have other source pls post

[infocusmaximus]

Kya mast content banata hai tum maksud bhai

[Snowboardbound]

Hey, I’ve been confused with these types of navs. How do you get it to close itself once you’ve clicked on a link?

[ramanavami]

when the navbar in mobile mode the burger and close button wont work can someone help me?