Learn CSS dropdown menus in 6 minutes! 🔻

Рет қаралды 69,685

Bro Code

9 ай бұрын

#CSS #course #tutorial
CSS HTML dropdown menu tutorial example explained

Пікірлер: 40

@BroCodez Жыл бұрын

Bro Code Food Apple Orange Banana /* style.css */ .dropdown{ display: inline-block; } .dropdown button{ background-color: hsl(0, 0%, 80%); color: white; padding: 10px 15px; border: none; cursor: pointer; } .dropdown a{ display: block; color: black; text-decoration: none; padding: 10px 15px; } .dropdown .content{ display: none; position: absolute; background-color: hsl(0, 0%, 95%); min-width: 100px; box-shadow: 2px 2px 5px hsla(0, 0%, 0%, 0.8); } .dropdown:hover .content{ display: block; } .dropdown:hover button{ background-color: hsl(0, 0%, 70%); } .dropdown a:hover{ background-color: hsl(0, 0%, 90%); }

@Honda4Ever Ай бұрын

A simple and quick tutorial. I couldn't need more! Thank you 🙏

@Spacetime23 29 күн бұрын

personally, the best and satisfying explanation which I could understand bit by bit. beginner-friendly! thanks a lot bro.

@Blueperry1512 27 күн бұрын

u r the best tutor , I've searched for many video how to create dropdown , your video is magnificent at all.

@jgiixom 3 ай бұрын

Bro, u r the best!

@khalidelgazzar Ай бұрын

Great lesson. Thank you

@mariafortes1133 2 ай бұрын

Thanks for the video!

@_izro_ 5 ай бұрын

Best Explanation Love From Pakistan

@cs8529 7 ай бұрын

Thanks for sharing Bro.

@smartgadgets5996 6 ай бұрын

Hello.. please make a video auto slide image... I dont get what they teach..you are a good teacher and teach the simple understanding way for us.. thank you

@okhakhugaruba8551 17 күн бұрын

Thank you for this lecture. It really helped me ❤

@suyashman7964 9 ай бұрын

Epic bro

@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.

@davidhusted817 7 ай бұрын

You must to add a third parameter for the addeventlistener to "false" , because the default event is bubbling , {From the parent to child}

@mswondo 7 ай бұрын

@@davidhusted817 I think its not necessary. Because if the anchor is a link with href, so its not have sub menu on it. So its a reguler link thats no need to stop the event bubble. But if the anchor has sub menu, its no need href so no event need to listener. An anchor automatic have behaviour that focused when after clicked. If we want to ensure that, we can use attribute : tabindex="0". So focus-within will automatically show or hidden sub menu.

@DubZinio 5 ай бұрын

ty so much dude lu

@daru3112 4 ай бұрын

thank you bro God bless

@zahid1909 6 ай бұрын

You are a real Master, bro! Respect!!

@mitskifan2003 4 ай бұрын

Thank you!!!!!!!💓💕💞💖💗💓

@ThomasIkemann 6 ай бұрын

04:50 I did not know you can do something like that, thank you!

@hameeeed5992 9 ай бұрын

Thanks

@ruzalshrestha1998 3 ай бұрын

God bless u

@danielleburchett6837 3 ай бұрын

Hello, do you know if this will work in a form in Squarespace? Squarespace has a form with a dropdown menu as an option, but I want the drop down menu to be searchable so when you start typing the dropdown menu will only display the words with those characters.