How To Create Advanced CSS Dropdown Menus

Dropdown menus are one of the more common things you will create as a developer, but most developers create boring looking dropdowns. In this video I will show you have to create and advanced CSS dropdown that can include things such as forms or advanced navigation.

📚 Materials/References:

🌎 Find Me Here:

⏱️ Timestamps:

00:00 - Introduction
00:20 - Demo/Starting Code
00:56 - Dropdown CSS
07:50 - JavaScript
11:25 - Advanced Menu HTML/CSS

#Dropdown #WDS #CSS

[BarisPalabiyik]

Imagine entering a website, seeing a regular dropdown, and close the browser with anger. :D

[woofiewill]

13:30 max-content does not mean that things will "be as wide as they possibly can be". Max-content will make it as large as it needs to contain the content without wrapping.

[aCitizenJOSerased]

Hey Kyle, thanks for your awesome video.

Here's my sole remark:
- Use semantically correct HTML tags wherever possible. E.g. use <header> and <nav> instead of <div>s everywhere.

[nate]

I felt like I had a pretty good grip on CSS and rudimentary JS for DOM manipulation but man do I learn a ton from these videos. Using data selectors, target in JS, handling CSS -- you're very talented with this stuff, and I very much appreciate it because I'm here to learn and I definitely am doing just that.

[bokwoon]

The best dropdown is a simple dropdown. You don't need anything more than that, if you care about user accessibility.

[CyberTechBits]

I modified your code a bit and can place the content anywhere on the page to perform the desired animation (not just under the "dropdown"). In my case I am sliding a menu from the left to the right in a container located below my header/menu... very cool! Looks fantastic on mobile devices! Super user friendly! Thanks Kyle!

[CyberTechBits]

Great tutorial Kyle! I was doing something very similar with a "slide in" menu, but was using click events on the menu buttons. I love the use of data attributes and the event listener! I was doing something "creative" to call the correct menu to "slide" based on IDs etc... This is much cleaner and I will be moving my design to use data attributes and a simple event listener to production! Thanks Kyle!!!

[Nicolas]

This tutorial was super useful to me as I was trying to make these dropdowns close when clicked outside, the thing is every time I would click on the content of the dropdown it would close, so my workaround was getting the ID of every element inside the dropdown div and setting it to not close when clicked, of course I knew this wasn't ideal but couldn't make it work otherwise, thank you for this video!

[robertkaminski]

You could remove js by using :focus-within selector.

[Pilosofia]

I have a suggetion, You could added index-tab to the dropdown div (the div will have ability to focus and blur ), then use somthing like this .dropdown:focus > dropdown-menu {...}.

[OnePieceWonPeace]

How about a pure CSS solution: use nested <ul>s & <li>s while leveraging pseudoclass :focus-within, :focus, and :hover. Focus Within should do the heavy lifting, but you may want the Hovers, and also .sibling:pseudo ~ .sibling-or-child, depending on how you want to put it together. If this doesn't makes sense to you, good. Go explore. It's 2021. You don't need JavaScript (which is great) to make amazing, solid, scalable dropdown menus, megamenus, popovers, etc.

[srymisclick]

The accessibility of this solution is horrendous.

[siriusFish]

Switching this over to a react component has been fun.

[thatsalot]

I can't express how thankful I am to you Kyle.

[aurobindobhuyan]

Thanks, YouTube for recommending this video. This is exactly what I want now.

[threeone]

Just read the article on using data attributes instead of classes and it's gold. It's my new method.

[HarshKapadia]

What a good tutorial! Well done, Kyle!

[christopherreif]

You have some of the best front-end content I've seen yet, thank you!

[colindante]

The method outlined here is visually appealing and the code (having finally figured it out with slight modification to my CSS) is a keeper.
However, using the tab key to navigate through the menu items one has to cycle through the contents of the drop down menus and this stems by toggling opacity as opposed to display.
Even though it looks great the downside is folks that are visually impaired shouldn't have to go through this mundane process.
It's one thing to disregard Internet Explorer when selecting your target audience but quite another not to take the visually handicapped into consideration. Please cater to them by using Wai-Aria.
Thankyou for this block of code.

[dansanger]

Did you know that you can copy and paste the text directly from the video? It's built into Safari. Just pause the video, select the text you want with your mouse, and copy and paste. Other browsers might support it as well. If not, there are plug-ins available. I discovered this by accident.