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.
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!
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!
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.
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.
@@tony-qc 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'.
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.
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.
@@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.
@@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.
@@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 👍
@@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 =/
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!!!
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 {...}.
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 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.
@@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.
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"
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.
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.
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?
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.
Here's what I notice on this video: 1) a voice created specifically for narration; can't get any better. 2) knowledge of the material that probably exceeds most people on Earth. 3) A distinct lack of groping around for words: umm, uh, etc. ... doesn't happen. I couldn't conceive of how a channel could get better than this.
@5:23 the entire line of .dropdown > .link:focus + .dropdown-menu{ opacity: 1;} does NOTHING on my computer? Does anyone have any idea why? Ive been staring at this for over 3 hours now
I've wrote the same code as showed. But I don't see the "Dropdown Content" underneath "Information" I've taking my time to see where is the issue, I can't find it or see it.
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.
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.
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 :)
Hallo, downloaded the html + css + js codes and run it under edge, it is ok except that hover doesn't work, have to click on Information to get the dropdown menu? why?
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.
Everything works except the end of the javascript chapter everything seems to work and I followed every single instruction but it doesn't seem to work after inputting the new javascript and css
But why use javascript? maybe we could have used the :focus-within pseudo-class and it would handle the active state. Also, maybe we could have animated the max-height property like setting it to 0 initially with overflow hidden and then on hover/focus set it to fit-content and animate that using transition. Let me know what you think :)
If you're looking to be a web developer and trying to avoid js it us simply not possible... Also i don't think height is gonna animate from 0 to fit content. Try yourself
@@siddiqahmed3274 "If you're looking to be a web developer and trying to avoid js it us simply not possible" absolutely not true...turn off javascript in your browser and you will see that plenty of websites still works without it, alot of developers still implement fallbacks for non js users, so javascript is mostly for "flair" not for usability. So one could easily develop websites without js, most js implementations are overused anyway
@@Jeppelelle Just because we provide fallbacks doesn't mean we are able to avoid the JavaScript portion. You still need to be a solid JavaScript developer to get 99% of jobs on the market these days.
@@logicdonkey In addition, while many websites will _work_ without JavaScript, they may lose a lot of functionality. A JS-less website is not competitive in today's market (unfortunately).
Imao, it's not about avoiding JS all together because you can't use it, but rather if there is a CSS solution for it, skip the JS. It simplyfies the web app as it gets more complex. For instance, by using CSS instead of JS when you can, you don't have to reinitialize UI JS code every time the DOM changes. Take it from someone with more than 20 years of web dev experience 😉
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.
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
If we use opacity instead of changing ingredients display. Doesn't that mean the element is still there but invisible? What then happens to accidental clicks?
Good question. You could create a keyframed animation such that 0% would display:none but 1% gets to the opacity:0. This would allow the actual hiding of the elements. (Edit: might have that backwards… maybe 99%, 100%, but you get the idea)
I don't think pointer-events: none; is enough when it's hidden. From the docs: Elements with pointer-events: none will still receive focus through sequential keyboard navigation using the Tab key.
This is really poor UX - creating similar-looking elements with completely different behavior is confusing for the user and should be avoided. Also if you need to organize that much information into a single dropdown on you header, maybe its better to rathet consider how your information architecture is laid out. This is basically how websites used to be made in the late 90s, early 2000's and theres a reason why this sort of navigation has been shunned by UX designers - its not user friendly... You're a great guy Kyle, and have some good advice sometimes - so keep up what you're doing with this channel, but this video was not so much your classic developer tips as jumping into the UX field without doing proper research first, I would recommend anyone to read research done by NNG on the subject as a starting point...
Completely agree. This is so wide of the mark. For those curious as to why it is just wrong, go and have a look at the websites you frequent most often and show me an example of where this exists in the real world.
This is a very common pattern used all over the web, not some relic of the distant past (and fun fact - back in the late 90's early 2000s doing stuff like this was a real job in and of itself. I was there, yes I'm old!). It's used by very large organisations (eg Amazon, Apple, Microsoft) as well as smaller entities. I do agree that there should be something that indicates to the user the thing drops down (a dropdown symbol of some sort) to distinguish the dropdown menus from regular links, but otherwise I wouldn't call it bad UX per se.
I think he is focusing on the practical stuff, no the conceptual one. It's up to us to apply it properly considering UX Design or whatever, since what he is trying to teach us is how to make a pleasing and functional dropdown menu, not a advanced and UX Friendly Interface.
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?
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?
Imagine entering a website, seeing a regular dropdown, and close the browser with anger. :D
Turn customers away LOL
I really can't imagine that.
Yeah that was a pretty weird intro.
I'd love to see the evidence. Citation needed ;)
Haha. Nice
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.
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!
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!
that’s actually exactly why I clicked on it lol
I'd Love to see ya code
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.
And no css variables. Also using pixels.
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.
Or use code to generate your elements like a sane individual.
Im starting up Web dev, sorry if this sounds dumb, but why is this important?
@@tony-qc 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'.
I can't express how thankful I am to you Kyle.
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.
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.
@@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.
@@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.
@@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 👍
@@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 =/
You're superhuman. Anyone who wants to make petty criticisms is jealous. Thanks for your videos.
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!!!
Just read the article on using data attributes instead of classes and it's gold. It's my new method.
Thanks, UA-cam for recommending this video. This is exactly what I want now.
The best dropdown is a simple dropdown. You don't need anything more than that, if you care about user accessibility.
Also if javascript is disabled for any reason then this dropdown solution will not work
@@minglee5249 Ahh yes those damn IE6 users 😂
yeah doesnt support terminal based browsers. disliked...
totally agree
@@sicfxmusic why supporting such a old ass fucking browser is still a must is beyond me
who the fuck uses this shit
You have some of the best front-end content I've seen yet, thank you!
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 {...}.
What a good tutorial! Well done, Kyle!
You could remove js by using :focus-within selector.
Great video! Nice voice and pace, pleasant to follow! Thank you very much!
Switching this over to a react component has been fun.
Superb! Thank you very much. Beyond the big picture presented, there are so many cool little nuggets to glean here.
You are talented in delivering the information. May Allah guide to way of truth brother. You are a treasure.
🤡
Thank you so much! I love your videos and I'm always checking my YT notifications to see if you uploaded a new vid!
Thank you so much for creating this video, through explanations which I appreciated and was able to customize it to my website!
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...
Just the tut I was searching for thanks 🙏
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
Now that is a massive honor. I love ChrisFix
it’s nice .. welcome back 😍
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.
Do u think there is away too make this type of menu accessible for all? Good analysis
@@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.
Add visibility: hidden; to actually hide the content (supports transitions), add aria-expanded for context and set .focus() when opening.
@@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.
@@Dev-zr8si you have issues and fortunately I'm not a shrink so I don't have to deal with them.))
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"
Hey!! Thanks for this and for the Cheat Sheet it was Awesome!!! 😍
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.
Love what you do on UA-cam...nice videos.
Is it possible to make a video to show how make this dropdown menu responsive?
Yes, plese. Great videos and presentations. TY!!!
Thank you very much!!! Always learning something new from you!
That was really helpful, thank you for all your work! :)
You are amazing. AS usual. Very helpful, clear and in time..
Good work. Appreciate.
About bringing in those customers in my life, Kyle, you've done incredibly so well. Much thanks.
Very good video. I will use this way t build navigation in the future.
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.
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.
Avoid JS as much as you can.
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?
Hey OnePieceWonPeace, I'd say if you figured out how to do it we'd love to see an example.
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.
absolutely awesome tutorial sir!
CSS is very powerful language 👍👍👍
Btw you are awesome brother ❤️
oh my god thanks so much it worked like a charm
Thank you! You are very talented!
Thank you for these tutorials. They are really helpful and you're doing a wonderful job.🙂
Why does my visual studio 2019 not recognise the data attributes (data-dropdown) it just treats it like a class
Feel good to be in first 10 comments awesome video
You're awesome! Thank you for sharing your knowledge :)
Dev you are good at Java- impressed- very
Great lesson!
Thanks, now I know a better way to dismiss dropdown properly.
Hi, what is the advantage of using javascript over building the dropdown with pure css?
None! Other than potentially using the CPU instead of the GPU, if that's actually what you want.
This is awesome thank you for sharing👍👍👍👍
The accessibility of this solution is horrendous.
I was losing track at around 4 minutes in with that many selector combinators lol
Gotta flex on them plebs ;)
Here's what I notice on this video: 1) a voice created specifically for narration; can't get any better. 2) knowledge of the material that probably exceeds most people on Earth. 3) A distinct lack of groping around for words: umm, uh, etc. ... doesn't happen. I couldn't conceive of how a channel could get better than this.
Well, the first example looks clearer to me.
Awesome 🤩
@5:23 the entire line of
.dropdown > .link:focus + .dropdown-menu{ opacity: 1;} does NOTHING on my computer? Does anyone have any idea why? Ive been staring at this for over 3 hours now
So apparently :focus doesnt work on click in Safari. IVE BEEN FIDDLING WITH THIS FOR HOURS!!!!!
thanks man! you are amazing
How does this behave with a narrow phone display where there is no space for three drop down entries side by side ?
Just when I think I have my css and html down I get taken to school Damm IT lol. Thank you bro you rock!!!
Man, how could you talking so fast but keep typing fast too xD
But glad we still able to follow
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.
I've wrote the same code as showed. But I don't see the "Dropdown Content" underneath "Information" I've taking my time to see where is the issue, I can't find it or see it.
me too
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.
Wouldn't that be more suitable for information-revealing purposes than navigation menus?
Might work for you, but is likely very non-accessible.
not very accessibility friendly, since it's purpose is deferent. Better be wrapped in if you do this for some reason...
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.
would love to see you making it responsive.
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 :)
Love your tutorials man😍😍😍
Can you please tell the name of the video editor and screen recorder you are using🙏🙏🙏
You are always great...
wow. that great. now please save me time i just download.with thanks.
Suggestion, make use of the details element. Will remove the need for JS.
Checkout :focus-within. You can also leverage Generic and Adjacent Sibling Selectors if necessary.
Hallo, downloaded the html + css + js codes and run it under edge, it is ok except that hover doesn't work, have to click on Information to get the dropdown menu? why?
I try the same way you did, but when I put i with class which mean icon instead of the text. it Does'nt work.
How do you stop the drop-down from going beyond the screen?
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.
Thank you for helping me.
Dropdown was working but deleting menu items. When you change the css it will not even open. Looked great but appears to be broken
Id love to see a version of this for react
Boss, You are awesome
Everything works except the end of the javascript chapter
everything seems to work and I followed every single instruction but it doesn't seem to work after inputting the new javascript and css
thnx for usefull video
how we can use it with reactjs i mean js code
But why use javascript? maybe we could have used the :focus-within pseudo-class and it would handle the active state. Also, maybe we could have animated the max-height property like setting it to 0 initially with overflow hidden and then on hover/focus set it to fit-content and animate that using transition. Let me know what you think :)
If you're looking to be a web developer and trying to avoid js it us simply not possible... Also i don't think height is gonna animate from 0 to fit content. Try yourself
@@siddiqahmed3274 "If you're looking to be a web developer and trying to avoid js it us simply not possible" absolutely not true...turn off javascript in your browser and you will see that plenty of websites still works without it, alot of developers still implement fallbacks for non js users, so javascript is mostly for "flair" not for usability. So one could easily develop websites without js, most js implementations are overused anyway
@@Jeppelelle Just because we provide fallbacks doesn't mean we are able to avoid the JavaScript portion. You still need to be a solid JavaScript developer to get 99% of jobs on the market these days.
@@logicdonkey In addition, while many websites will _work_ without JavaScript, they may lose a lot of functionality. A JS-less website is not competitive in today's market (unfortunately).
Imao, it's not about avoiding JS all together because you can't use it, but rather if there is a CSS solution for it, skip the JS. It simplyfies the web app as it gets more complex. For instance, by using CSS instead of JS when you can, you don't have to reinitialize UI JS code every time the DOM changes. Take it from someone with more than 20 years of web dev experience 😉
will have to try this
when i try to do the .link:focus it doenst work....
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.
thank you Kyle!
I would be happy being able do the boring dropdown
If you have learning disabilities I highly recommend speed x0.75 in player. No offense bud I can't dart around that fast lol and great tutorial
this rules! Thanks man
Playing the video on .75 helped a lot
:focus-within is a good alternative now that you can now use instead of having to implement the logic with JavaScript.
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
Very impressive. Good job!
If we use opacity instead of changing ingredients display. Doesn't that mean the element is still there but invisible? What then happens to accidental clicks?
Good question. You could create a keyframed animation such that 0% would display:none but 1% gets to the opacity:0. This would allow the actual hiding of the elements. (Edit: might have that backwards… maybe 99%, 100%, but you get the idea)
Pointer-events none won't let you click on it. They are just ignored as if they are not there
I don't think pointer-events: none; is enough when it's hidden.
From the docs:
Elements with pointer-events: none will still receive focus through sequential keyboard navigation using the Tab key.
@@MrMudbill yeah that's an issue. Then we should set display to none. Create a keyframe and set the display to block at 1%
Thank you bro!
Amazing as always. Wish Kyle can do a crash course on the arcgis javascript api
Could anyone explain what the JS code dose? Step by step.
This is really poor UX - creating similar-looking elements with completely different behavior is confusing for the user and should be avoided. Also if you need to organize that much information into a single dropdown on you header, maybe its better to rathet consider how your information architecture is laid out. This is basically how websites used to be made in the late 90s, early 2000's and theres a reason why this sort of navigation has been shunned by UX designers - its not user friendly...
You're a great guy Kyle, and have some good advice sometimes - so keep up what you're doing with this channel, but this video was not so much your classic developer tips as jumping into the UX field without doing proper research first, I would recommend anyone to read research done by NNG on the subject as a starting point...
If you could link about the research you're taking it would be helpful. Thanks.
Completely agree. This is so wide of the mark.
For those curious as to why it is just wrong, go and have a look at the websites you frequent most often and show me an example of where this exists in the real world.
This is a very common pattern used all over the web, not some relic of the distant past (and fun fact - back in the late 90's early 2000s doing stuff like this was a real job in and of itself. I was there, yes I'm old!). It's used by very large organisations (eg Amazon, Apple, Microsoft) as well as smaller entities. I do agree that there should be something that indicates to the user the thing drops down (a dropdown symbol of some sort) to distinguish the dropdown menus from regular links, but otherwise I wouldn't call it bad UX per se.
@@martinh4982 The way that other companies use this is incomparable to this abomination.
I think he is focusing on the practical stuff, no the conceptual one. It's up to us to apply it properly considering UX Design or whatever, since what he is trying to teach us is how to make a pleasing and functional dropdown menu, not a advanced and UX Friendly Interface.
if the navbar is responsive and turns into a dropdown for smaller screens, then what do we do for the secondary dropdown?
The easiest way is to hide this navbar for small screens and to display the hamburger menu instead.
RESPONSIVE PLEASE!!! u the man!
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?
Hmmm... I think, "float" Left & Right is the better answer for this question, without using "max-width" 😅
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?