Responsive Navigation with Animated Multi Level Dropdown | HTML and CSS Tutorial

In this video we will create a responsive navigation bar with an animated dropdown menu for your website. I decided to add a few cool animations, borders, and arrows to make this menu stand out!. This was achieved without using any frameworks or libraries just plain HTML and CSS.

Don't forget to leave a thumbs up if you found the video useful. Also, click on the bell icon to turn on notifications. This way you'll be notified the moment new videos are uploaded.

[ PROJECT FILES ]

[ SOCIAL MEDIA ]

[ HOSTGATOR ]

Get affordable domain and web hosting with HostGator. Save up to 60% off of your entire purchase with the coupon code below.

Coupon code ► JULIOCODES60

[ MY GEAR ]

Programming/Video editing laptop Specs & extras

Laptop: Dell XPS 15 7590
Processor: 9th Generation Intel Core i7-9750h
RAM: 32GB (Upgraded)
Graphics Card: Nvidia GeForce GTX 1650 4GB GDDR5
Storage: 500GB M. 2 PCIe NVMe SSD (Upgraded)
--- Extras ---
Monitor: Dell Ultrasharp 27"
Keyboard: Logitech MX Keys
Mouse: Logitech MX Master 3
Microphone: Blue Yeti

[ DISCLAIMER No. 1 ]

In order to speed up the development process CSS prefix are not used. In order to ensure cross browser compatibility please use prefixes where necessary.

[ DISCLAIMER No. 2 ]

This video description contain affiliate links, which means that if you click on one of the product links, I’ll receive a small commission. This helps support the channel and allows me to continue to make videos like this. Thank you for the support!

[CheapHomeTech]

Wishing for more:
1. Sticky menu.
2. Hamburger on left.
3. Hamburger that only takes up the room that is needed instead of the whole page.
However it's the best how-to I've come across.
Thank you.

[vojtechkochta]

I must say.. One of the best tutorials ever. Got exactly what i needed and didnt know about

[PhilipRice]

This is the most comprehensive web programming tutorial on the nav bar that I've ever seen, it's crystal clear - thanks so much for producing it! Subscribed and looking forward to more.

[nomoretruelover]

i am not a developer but health professional, just part-time learning python and working on a personal django project. your tutorial is very helpful, creative and digestible. a newbie like me can understand easily. i don't like to comment or subscribe channels but your video forced me to follow you and leave a comment. thank you very much

[ainaopeyemi]

Hello, i know that right now it might seem u don't have much subscribers, but i assure u that we are many looking for your content, don't ever stop pls, u are really helping us, just keep releasing until YouTube discovers Ur value and increase your reach via algorithm, thank u.

[disturbingdevelopment]

I picked up a lot of tips because Julio explains things very well as he writes the code. Very nice dropdown menu also.

[WisestGeneration]

I’ve been looking for a channel like yours for a VERY long time. Love your work!

[HelloWorld-omuh]

I just love how you tought me bro, god bless you !

[keyos]

Congratulations on 10, 000! Keep going!

[shahzaibriaz]

Trust the best tutorial i've ever seen.
One of most loved tutorial on internet (youtube)
Love You Dear.

[ThatGuyAnonymous]

The quality of the content compelled me to subscribe. keep it up man!

[АзимАзимов-чй]

This best tutorial for adaptiv menu. It is help me finish my current project. Awsome. Thank you

[jeanhz]

30:47 at the moment of passing the cursor through each submenu I get everything in the horizon and not in the ladder, I did everything but I do not get help please

[craigjohnson]

Great video! I love that you only use HTML, CSS, and JavaScript.

[cjdj]

I love your tutorials Julio.Cool stuff!

[fullstackprojects]

Very Informative thank you for sharing. Thank you.

One thing - Please briefly explain certain points that were not touched upon for example why 'initial' was used, how the compound selectors were working in the entire nested drop downs, why the 'Book a table' buttons' margin was set the way it was set, how the triangle shape was achieved. I know this would make the video long but please see if such things can be covered because it makes the learning and doing along the way smooth and without distraction(going to search in another tab and understanding the concept and then coming back).

[MrSiamtea]

Best responsive navbar tutorial ever 👍👌😊

[acmmproductions]

Thank you for this tutorial! Your videos are very clear and the result is always so sleek. I just finished following the tutorial and noticed that, by the end of it, my circle behind the logo icon is slightly oval (this is in desktop view, but in mobile view it’s a perfect circle). This is such a minor detail, I think in your final result this isn’t happening, so I must’ve done something wrong. Thanks again for another great tut!

[Series-crhi]

your coding way is awesome but some issue arises in javascript coding
//create function to select element
const selectElement = (element) =>
//open and close nav on click
'click', listener: () => {
selectElement(element: 'nav').classList.toggle( token: 'active');
});

element: ----> colon is not accepted what should i do

[alkasingh]

Hi I referred your GitHub page for reference and the codebase doesn't contain navbar section. kindly check and update the codebase .