How To Create Advanced CSS Dropdown Menus
Рет қаралды 468,620
Күн бұрынFREE CSS Selector Cheat Sheet: webdevsimplified.com/specific...
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:
FREE CSS Selector Cheat Sheet: webdevsimplified.com/specific...
Starting GitHub Code: github.com/WebDevSimplified/a...
GitHub Code: github.com/WebDevSimplified/a...
Async Vs Defer Video: • What Is The Fastest Wa...
Async Vs Defer Article: blog.webdevsimplified.com/201...
JavaScript Data Attribute Article: blog.webdevsimplified.com/201...
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
⏱️ 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 2 жыл бұрын
Imagine entering a website, seeing a regular dropdown, and close the browser with anger. :D
@luukbrugge 2 жыл бұрын
Turn customers away LOL
@dancarter6044 2 жыл бұрын
I really can't imagine that.
@IdleAtre 2 жыл бұрын
Yeah that was a pretty weird intro.
@NoelLeeman 2 жыл бұрын
I'd love to see the evidence. Citation needed ;)
@simosenpai2685 2 жыл бұрын
Haha. Nice
@woofiewill 2 жыл бұрын
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.
@CyberTechBits 2 жыл бұрын
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!!!
@bokwoon 2 жыл бұрын
The best dropdown is a simple dropdown. You don't need anything more than that, if you care about user accessibility.
@minglee5249 2 жыл бұрын
Also if javascript is disabled for any reason then this dropdown solution will not work
@sicfxmusic 2 жыл бұрын
@@minglee5249 Ahh yes those damn IE6 users 😂
@voidemon490 2 жыл бұрын
yeah doesnt support terminal based browsers. disliked...
@baczek40 2 жыл бұрын
totally agree
@astrotecn Жыл бұрын
@@sicfxmusic why supporting such a old ass fucking browser is still a must is beyond me who the fuck uses this shit
@Nicolas5095 Жыл бұрын
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!
@CyberTechBits 2 жыл бұрын
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!
@tate2697 2 жыл бұрын
that’s actually exactly why I clicked on it lol
@mlungisisidu7653 11 ай бұрын
I'd Love to see ya code
@christopherreif3624 Жыл бұрын
You have some of the best front-end content I've seen yet, thank you!
@HarshKapadia 2 жыл бұрын
What a good tutorial! Well done, Kyle!
@aCitizenJOSerased 2 жыл бұрын
Hey Kyle, thanks for your awesome video. Here's my sole remark: - Use semantically correct HTML tags wherever possible. E.g. use and instead of s everywhere.
@pdsnpsnldlqnop3330 2 жыл бұрын
And no css variables. Also using pixels.
@CyberTechBits 2 жыл бұрын
My $0.02.. I like that he uses divs doesn't bother me at all and makes perfect sense since you can use this anywhere... say a slide in forms in a different container.
@akzual50 2 жыл бұрын
Or use code to generate your elements like a sane individual.
@fayth7199 2 жыл бұрын
Im starting up Web dev, sorry if this sounds dumb, but why is this important?
@harmonicresonanceproject 2 жыл бұрын
@@fayth7199 Because properly formatted web pages are what search robots need to index the site. Look into the changes that Google have made recently in terms of web page structure and indexing eg. It's very much related to correct html structure and useage at the core. A podcast I recommend is 'HTML All The Things Podcast'.
@VivekTR 2 жыл бұрын
Thank you for these tutorials. They are really helpful and you're doing a wonderful job.🙂
@z4ckfytc777 2 жыл бұрын
Thank you so much! I love your videos and I'm always checking my YT notifications to see if you uploaded a new vid!
@YellowManPsypeople 2 жыл бұрын
You are amazing. AS usual. Very helpful, clear and in time.. Good work. Appreciate.
@rogerpence 10 ай бұрын
Superb! Thank you very much. Beyond the big picture presented, there are so many cool little nuggets to glean here.
@natb007 6 ай бұрын
Great video! Nice voice and pace, pleasant to follow! Thank you very much!
@jakobo5521 2 жыл бұрын
That was really helpful, thank you for all your work! :)
@Pilosofia 2 жыл бұрын
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 {...}.
@lorenainfanter.3099 2 жыл бұрын
Thank you very much!!! Always learning something new from you!
@siddarthd9774 Жыл бұрын
You are really a life saviour for many candid like me... You are really a pure soul....Thanks a lot ❤️... pls do more tasks like these...
@nate1988 2 жыл бұрын
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.
@ayazaslam1362 2 жыл бұрын
u dont learn u get brainwash so u watch his videos more. at 3:10 no need to use calc but he will so people get curious. i give u one more example he will make videos and talk fast so people watch again and again. in short he f**k smartly with your brain. i hate him now more than ever. unsubscribe. why he dont make videos with normal talking speed and eassy examples so we dont go to google and calculate rem to px and in multiply etc. In short smart business man bad or shall i say worst teacher. unsubscribe. hope u understand my point.
@nate1988 2 жыл бұрын
@@ayazaslam1362 I understand how you feel (if I read that correctly), but part of my self-teaching journey is not buying any products and not paying any tuition. I've been doing fine thus far and while I appreciate this guy, I am not spending money on courses. That doesn't exclude donating to a good creator (like WDS) though. If concepts seem scattered and/or fast, that's fine for me. The trick to teaching myself is knowing how to piece myriad resources together. This channel is but one resource of many.
@ayazaslam1362 2 жыл бұрын
@@nate1988 I am also doing self study . Covid = lost job lol. I get furistate by these things. I feel u self study is hard specially when u r doing practice and do silly mistake. Good luck if need self study partner I am available 24/7 now a days. I know little bit html css Js and php.
@nate1988 2 жыл бұрын
@@ayazaslam1362 Early 30s here and in a similar situation to you. Its a tough time right now, I feel that. I just try to focus on the positive of things, like the videos here for free, because it's easy to get lost in negativity in this world. Best of luck to you in your studies 👍
@watwoot9020 2 жыл бұрын
@@ayazaslam1362 lol, salty much. maybe you should try learn some more fundamentals, if you can't follow the code. Also, you can play the video at lower speeds. I really don't get why you are so mad about it, its free anyway and very decent code =/
@thatsalot3577 2 жыл бұрын
I can't express how thankful I am to you Kyle.
@evelynakow6771 4 ай бұрын
Thank you so much for creating this video, through explanations which I appreciated and was able to customize it to my website!
@aurobindobhuyan2107 5 ай бұрын
Thanks, KZfaq for recommending this video. This is exactly what I want now.
@paupang781 2 жыл бұрын
You're awesome! Thank you for sharing your knowledge :)
@siriusFish1 Жыл бұрын
Switching this over to a react component has been fun.
@srymisclick 2 жыл бұрын
The accessibility of this solution is horrendous.
@iquahs 2 жыл бұрын
I was losing track at around 4 minutes in with that many selector combinators lol
@tomasz9429 2 жыл бұрын
Gotta flex on them plebs ;)
@itdept6121 Жыл бұрын
Hey!! Thanks for this and for the Cheat Sheet it was Awesome!!! 😍
@shervinmokthari1251 2 жыл бұрын
absolutely awesome tutorial sir!
@robertkaminski1781 2 жыл бұрын
You could remove js by using :focus-within selector.
@TechOasis101 Жыл бұрын
Just the tut I was searching for thanks 🙏
@Renodarkholes 2 жыл бұрын
Love what you do on KZfaq...nice videos. Is it possible to make a video to show how make this dropdown menu responsive?
@doctorartiste2905 2 жыл бұрын
Yes, plese. Great videos and presentations. TY!!!
@peterschmitt2735 2 жыл бұрын
Very good video. I will use this way t build navigation in the future.
@Happy_Shaikh 2 жыл бұрын
Love your tutorials man😍😍😍 Can you please tell the name of the video editor and screen recorder you are using🙏🙏🙏
@ScreenPunditsNetwork 2 жыл бұрын
Awesome content... Thank you for being my inspiration
@threeone6012 2 жыл бұрын
Just read the article on using data attributes instead of classes and it's gold. It's my new method.
@mahmoud-bakheet 2 жыл бұрын
it’s nice .. welcome back 😍
@DaJungleDred 2 жыл бұрын
This is awesome thank you for sharing👍👍👍👍
@geb2 2 жыл бұрын
Love the video. If you have a transition on opacity but not on the pointer-events, will the non-transitioned properties change at the end of the transition or at the beginning? (I'm guessing effectively at the beginning, since it'll respond immediately to the new ':focus' status?)
@MrMudbill 2 жыл бұрын
The pointer events will enable as the animation begins when opening. They will disable when it animates out. So if you're quick, you can click something within it just before it opens, but you can't when it closes.
@alenachuyankova 2 жыл бұрын
Thank you! You are very talented!
@leannezilka9355 Жыл бұрын
Thank you for this tutorial!
@thecyrusj13 2 жыл бұрын
You're superhuman. Anyone who wants to make petty criticisms is jealous. Thanks for your videos.
@mysterbirdtrooper6516 2 жыл бұрын
I gotta say the cheatsheet is very helpful. I’m going back to web dev after a break and that cheatsheet is definitely speeding things up.
@marvinfok65 2 жыл бұрын
Great lesson!
@ashleygahl3638 2 жыл бұрын
Amazing as always. Wish Kyle can do a crash course on the arcgis javascript api
@karlsgarage6477 2 жыл бұрын
Thank you for all of your videos. I’m not sure if you’ll get this reference, but you’re the ChrisFix of making websites
@WebDevSimplified 2 жыл бұрын
Now that is a massive honor. I love ChrisFix
@dansanger5340 Жыл бұрын
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.
@colindante5164 2 жыл бұрын
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.
@williamlindsayiii824 2 жыл бұрын
Do u think there is away too make this type of menu accessible for all? Good analysis
@colindante5164 2 жыл бұрын
@@williamlindsayiii824 To answer your question directly use aria-expanded when creating drop down menus. There's quite a bit to learn using Wai-Aria. But why stop there; if we are using accessibility in the navigation bar we should implement it throughout our HTML document. Try and refrain from using div's and use schematic tags like nav, article, aside, section, figure, figcaption and obviously the h1 through h6 tags. Use the 'Outline Algorithm' to reflect as how you intended your page to be displayed (Notice how I phrased this sentence). Use hgroup to hide tags so they don't show up in the Outliner Algorithm Tool. This is used by screen readers and web crawlers to interpret your content. With respect to SEO, it's the content that gets ranked so take advantage of 'google search console'. I hope this helps and sheds some light on where you need to focus on learning these technologies.
@photofrode 2 жыл бұрын
Add visibility: hidden; to actually hide the content (supports transitions), add aria-expanded for context and set .focus() when opening.
@Dev-zr8si Жыл бұрын
@@colindante5164 This is a video about dropdown menus, not accessibility. You people love shoving BUT THATS NOT ACCESSIBLE everywhere as if that makes you a better person than everyone else.
@colindante5164 Жыл бұрын
@@Dev-zr8si you have issues and fortunately I'm not a shrink so I don't have to deal with them.))
@scyllado3769 2 жыл бұрын
wow, you taught me a way to toggle active class of a group of items "click item 1 to toggle active class, and remove active class from other items in the group"
@Vega004 2 жыл бұрын
Btw you are awesome brother ❤️
@lucienchu9649 2 жыл бұрын
Thanks, now I know a better way to dismiss dropdown properly.
@musicforyou4444 2 жыл бұрын
Thank you for helping me.
@lucas_oficcial 2 жыл бұрын
thanks man! you are amazing
@behindthescene2727 2 жыл бұрын
will have to try this
@AlmasyAlliances 2 жыл бұрын
For my dropdowns I've been using the 'details' and 'summary' tag with a z-index of 1000 on the 'on' state. You might look into that, save you a ton of JS code.
@RodrigoMendoza7 2 жыл бұрын
Wouldn't that be more suitable for information-revealing purposes than navigation menus?
@woofiewill 2 жыл бұрын
Might work for you, but is likely very non-accessible.
@stelatasheva4993 2 жыл бұрын
not very accessibility friendly, since it's purpose is deferent. Better be wrapped in if you do this for some reason...
@MrGarysjwallace 2 жыл бұрын
Dev you are good at Java- impressed- very
@jamshediqbal7936 2 жыл бұрын
Very impressive. Good job!
@OnePieceWonPeace 2 жыл бұрын
How about a pure CSS solution: use nested s & 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.
@rafalpotasz 2 жыл бұрын
Very sensible advice imo. I do think that if JS isn't needed, it shouldn't be used and there is a plethora of solutions waiting to be explored.
@theosdinoysios4350 2 жыл бұрын
Avoid JS as much as you can.
@mitetoOoOoO 2 жыл бұрын
When he said he needed JS to "unfocus" the buttons, I immediately thought of checkboxes, because they can be easily unchecked, so I gave it a try. I made the exact same menu and it worked. However when I hit the Tab key on my keyboard it goes through my sub-links even if the box is not checked. What did I do wrong?
@davivify 2 жыл бұрын
Hey OnePieceWonPeace, I'd say if you figured out how to do it we'd love to see an example.
@cobra02411 2 жыл бұрын
Maybe I'm lacking in my CSS kung fu but how do you handle toggling an attribute? You need aria-expanded to convey the state of the control to a screen reader to be accessible. So aria-expanded needs to be toggled between true / false and the only way I know how to do that is with JS. Also, you have to be careful with pseudo elements because screen readers only read what's in the DOM. I'd have to see an example but I'd be very concerned about the accessibility of it.
@karstenthurfjell-scholz6065 2 жыл бұрын
What about your guitar? Maybe some simplified Zappa riffs in a follow-up video? Even though it‘s no SG 🙂
@mahabub-sunny 2 жыл бұрын
You are always great...
@septimusforster 6 ай бұрын
About bringing in those customers in my life, Kyle, you've done incredibly so well. Much thanks.
@woofiewill 2 жыл бұрын
Nice rundown! One little loose end though; if your screen width was any smaller that Login dropdown would overflow off the right side of the screen wouldn't it? How do you ensure the dropdown gets pushed in that case to the left to accommodate for that?
@Johan.A02s 2 жыл бұрын
Hmmm... I think, "float" Left & Right is the better answer for this question, without using "max-width" 😅
@FilipCodes 2 жыл бұрын
Awesome 🤩
@Shulkerkiste 2 жыл бұрын
Well, the first example looks clearer to me.
@rayyan-munassar Жыл бұрын
You are talented in delivering the information. May Allah guide to way of truth brother. You are a treasure.
@Nobodylihshdheuhdhd 7 ай бұрын
🤡
@kamakiapeter7815 2 жыл бұрын
wow. that great. now please save me time i just download.with thanks.
@elegance1802 Жыл бұрын
thank you Kyle!
@plantnt489 3 ай бұрын
Id love to see a version of this for react
@jozsefszabados1183 2 жыл бұрын
Thank you bro!
@BMikel 2 жыл бұрын
This is gem. There is not that much advanced tutorials on plain html / css drop down menus. What they usually do is simply copy-paste Bootstrap component, write some jQuery and pretend to make super multi-level menu tutorial. But your video is awesome. Could you make a close to a real-life advanced responsible multi-level HTML/CSS/JS mega menu tutorial?
@davivify 2 жыл бұрын
Hi Kyle. I've been writing JS for over 10 years and thought I knew it pretty well. But I guess there's been a ton of stuff added to JS and CSS when I wasn't looking. So I'm astounded at how much stuff you use that I've never heard of. Your videos contain a conucopia (since we're now in fall) of cool tips. However, I notice that whenever you go to wrap an element in HTML, you do so manually. Not that it takes that long, but I thought you'd appreciate the opportunity to save yourself a few steps. I had been using the wrapWithAbbreviation command, but am now using a plugin called 'htmltagwrap', which I've assigned to alt + W, which I find works really well. Anyway, thanks for all the great videos.
@me_manish_prajapati 2 жыл бұрын
What do you think about focus-within? We can use that to achieve same via css only.
@nixonlim4715 2 жыл бұрын
would love to see you making it responsive.
@watwoot9020 2 жыл бұрын
it basicly is responsive, you just need to copy paste the dropdown, change the absolute position and hide/show at certain viewports. That said, thanks for the video :)
@TheNormMan 4 ай бұрын
I would be happy being able do the boring dropdown
@jserr9682 9 ай бұрын
Just when I think I have my css and html down I get taken to school Damm IT lol. Thank you bro you rock!!!
@stefan.astrand 2 жыл бұрын
Suggestion, make use of the details element. Will remove the need for JS.
@OnePieceWonPeace 2 жыл бұрын
Checkout :focus-within. You can also leverage Generic and Adjacent Sibling Selectors if necessary.
@AlexAnder-fk2yg Жыл бұрын
Thx, interresting example instead of using standart ul li way
@osmangonisufy629 Жыл бұрын
Boss, You are awesome
@mswondo 8 ай бұрын
I try to use focus-within to replace the javascript. But we must click on it to appear the pulldown/drop down. And using left, right, top, bottom; I try to control the direction of the dropdown. It's may be : drop down to left, drop down to right, drop up to left, drop up to right.
@groovebird812 2 жыл бұрын
Hi, what is the advantage of using javascript over building the dropdown with pure css?
@OnePieceWonPeace 2 жыл бұрын
None! Other than potentially using the CPU instead of the GPU, if that's actually what you want.
@MiSt3300 2 жыл бұрын
I totally love his videos!
@dzlifestyle1434 Жыл бұрын
thnx for usefull video how we can use it with reactjs i mean js code
@amindhahri2542 2 жыл бұрын
Kyle how do you remember so many tags attributes?
@Aalok464 2 жыл бұрын
Feel good to be in first 10 comments awesome video
@komakaze1 2 жыл бұрын
Looks like we'll have the .has() selector within a year. I'm hoping that will dramatically reduce the amount of JS needed here.
@BorisDiRocco Жыл бұрын
Hi there, thanks so much for the tutorial. I would like ask you about :focus selector cause, doesn't work actually on safari but only in chrome. I tried a couple of things but nothing. Hope you can help me cause actually like your method. Thanks
@shivamsahil3660 2 жыл бұрын
I thought it as the drop-down in the sense of select tag in html... Btw you could definitely try using focus-within that will take away all sort of javascript thing you did there... Please also make a tutorial on creating something like react-select widget... With Multi select option and it's styling. I get frustrated while styling react select height.
@michaeldeoz 2 жыл бұрын
so it's great. Now could you explain how to make dropUP ?
@PostHocNonSeq 2 ай бұрын
If you are still reading comments, is there any chance you could tell me why the html doesn't seem to work. All of the links come out in a vertical column when I run it in chrome? I am trying to learn something and not really at this level yet. Thanks, Joe
@leifflor7062 3 ай бұрын
:focus-within is a good alternative now that you can now use instead of having to implement the logic with JavaScript.
@coderholic6741 2 жыл бұрын
can you make it on hover as most of the cases there are more on hover than on click, i tried to modify your code but got some problems. the menu is bouncing up and down, what's the good way to modify it to on hover?
@techshab9060 2 жыл бұрын
CSS is very powerful language 👍👍👍
@bboydarknesz 2 жыл бұрын
Man, how could you talking so fast but keep typing fast too xD But glad we still able to follow
@user-oj3rm9lw7n 3 ай бұрын
The first one was good and will collect people in website.
@dave6012 2 жыл бұрын
Hey Kyle, et al, I had a question about your use of inline if…return statements. When using Express, I’ll often have a callback function that returns an error object (if there is one), but if I try to use the inline expression like this: if (err) res.send(err) res.send(success) It throws an error because there are 2 res statements. It works just fine if I put the if statement into a { } closure with an else statement, but it just makes for less clean code. Is there any particular reason for this? Could be a good video idea 🤔
@yaserhasan6004 2 жыл бұрын
you said it, it throws and error because you are sending two responses, the way to fix it without else statement is to exit the function if there's an error like so: change "if (err) res.send(err)" to "if (err) return res.send(err)" this should fix your problem
@dave6012 2 жыл бұрын
@@yaserhasan6004 that sounds good, I will try that. I always forget that I have the return available to me, because a res.send() will automatically end the function for me.
@MrMudbill 2 жыл бұрын
@@dave6012 I don't think res.send() ends the function. It rather sends the response headers. And once the headers are sent, you can no longer change them. You might be mixing it up with the fact that calling res.send() allows you to skip res.end() (or whatever it was called, haven't used Express in a bit).
@dave6012 2 жыл бұрын
@@MrMudbill that makes the error message I receive much more understandable.
@diegofergusson9113 2 жыл бұрын
Great Video, I learn a lot
@viktoriiakratser3363 2 жыл бұрын
You are rock :)
@njf0523 2 жыл бұрын
666k subscribers. i'm subbing simply to try and push you across the line...
@caminhodaslutas 2 жыл бұрын
Hello, can you do that example for ReactJS?
@BurnLikeAFlame 2 жыл бұрын
Would love to see a continuation of this, of how this would be handled when using a responsive navbar as well that turns into a hamburger menu as was done in older video kzfaq.info/get/bejne/d9pkdZpyma2zgJs.html . This doesn't seem to convert to hamburger dropdown menu style well, so what would the nav in the page made in this video look like in a mobile layout?
@ViperEO 2 жыл бұрын
How to boilerplate 101 - would be nice to see the usage of functions to generate repeated structural element, instead of just a huge pile of HTML
@user-hf5tm2rk4v 3 ай бұрын
I am brand new to this coding and learning. How do i get the webpage open so i can see my code making changes like he has on the right side of the screen.
Қайрат Әділгерей, Muyun Brothers, Аманғали Сыпабеков, Нұргүл Даубаева ҚЫЗЫҚ TIMES | Хотя бы кинода 3
Marat Oralgazin
Рет қаралды 995 М.
Diana Belitskay
Рет қаралды 25 МЛН
Brian Design
Рет қаралды 185 М.