WEB DESIGN IN FIGMA ep.11: Dropdown Menu Navigation - Free UX / UI Course

[@jesspearache4079]

Thanks for the Web Design in Figma series. I have been looking for real, hand-ons tutorials on Figma, and this is just what I needed... Great!

[@mavidesign]

Thank you for your support, Jess!! Glad you found this series helpful!

[@chr1z1001]

@@mavidesign Good for a Coffee Time ☕☕☕

[@Dobeedoagency]

You're a great teacher. The way you're able to explain things in detail to help your viewers understand not only how to do something but how it works is a skill that very few educational channels have.

[@mavidesign]

If you have problems with keeping the menu overlay open, try removing the "mouse leave" interaction and instead check "Close when clicking outside" in "Overlay" under "Interaction details". Hope this helps 👍

[@MohitSharma0813]

It was causing trouble initially but when I changed the timing for overlay to close a bit, it worked.

[@lynnduong7525]

WHAT WORKS FOR ME: under the "close interaction" add a delay of 100ms!

[@raghwendrapratapsingh6150]

Can you please share the figma file or made a community page on figma..?

[@AW-ni6dr]

thank you!@@lynnduong7525

[@karinakim5516]

Hi! A great lesson! But the "Hovering" function does not work on the main element, before the dropdown

[@saljugmahmudlu]

*Your channel is underrated* They're really helpful contents. Not usual stereotype contents. I love it. Keep it up!

[@tayloradams9320]

This is super helpful, thanks! I am running into the error/bug of when the drop down parent is hovered, it doesn't do the hover effect. I thought it was me and rebuilt the entire nav and components...then realized it is a Figma bug. Maybe too many interactions in one component?

[@lanyagilcalderon5960]

Super helpful, finally I'm understanding a lot of little things that were not taught in my school , but I did not get how to make the radius apparent?

[@simbawonwon]

This is great. I think we are missing the interaction when you hover on the dropdown_parent default, it doesn't change to the hover effect (black text in this case). I'm struggling in creating that interaction.

[@GurpreetSingh-nz2fh]

I am also struggling for the same could you pls let me know how can we fix this and apply hover value.

[@wailingwizard]

Not sure if this is the right fix, but I was able to create a bit of a hack for this by adding a second copy of the button into the overlay itself so that when the overlay appears the second button (with the hover state) appears on top of the original button along with the overlay. I added a 200ms delay to the overlay to make sure the interactions didn't interrupt each other.

[@amirtouma5802]

I fixed it by adding a delay of 1ms to the mouse enter interaction

[@kris_77-t9d]

Thank you!!!​@@amirtouma5802

[@orcusdei]

I love you! This is exactly the approach I knew it must work but wasn't sure how to make it. Helped me tremendously! Thank you!!!

[@maryamshabafrooz2664]

Resources doesn't get bold when you hover on it

[@alexanem39]

I watched till this episode and I just wanted to say thank you sir!! I am going to watch ell episodes of your series. Thank you, you helped me a lot!!!

[@antaris03]

By far the best and most useful tutorial for building a real flexible menu. Zhank you so much.

[@AmbarMacarena18]

Gracias por tus videos! para solucionar el tema del menu sobre el menu, apliqué un menu acordeon entre las opciones, asi no es tan dificil desplegar opciones entre cada menu item Saludos!!!!

[@ahsunhabibrasel]

Wow! what a episode these is. Thanks for sharing these awesome.

[@MrBalloonatic]

Great tutorial, thanks :) Is there a reason the drop-down menu wasn’t made into a component?

[@mrwaseem1276]

overlay is blinking while hover the mouse on resourcs

[@yzniinja]

ive got this too its suck in a cycle

[@carolinaliberatti654]

Thank you for sharing with great didactics!!!!!!!!!!!

[@camillestarr9109]

This is such a helpful tutorial. Thank you so much!

[@billfoley891]

Great videos! Much appreciated. QUESTION: Around 18:51, I understand your Interaction setting to "Close Overlay" when the "Mouse Leaves" the region of the overlay but I think we also need a setting to cause the overlay to close if the user moves the mouse away OUT OF THE "RESOURCES" MAIN MENU REGION. Can't figure out how to do this! I added an interaction fro the "Resources" Main Meny Region to "Close Overlay" when Triggered by "Mouse Leave" but it had no effect. Please help!

[@TurboldBatsukh-yt9eh]

02:46 In this video, we will create a dropdown menu for the header navigation. 05:32 Creating dropdown menu items in Figma 08:18 Customize dropdown menu navigation in Figma 11:04 Creating a dropdown menu with menu items for resources, blog, success stories, case studies, and press 13:50 Designing the dropdown menu in Figma 16:36 Create a dropdown parent menu item with an arrow 19:22 Create an interaction to open and close the dropdown menu on mouse enter and mouse leave 22:08 Setting up a dropdown menu in global navigation on websites

[@kikirinzani6351]

Resources menu does't change color when on hovering

[@MukulDevKallara]

Thank you so much. I have been confused with Hover and Mouse Enter

[@nicolakoroglu2236]

How can you successfully apply a OnClick URL to the Resources text, should you want to?

[@aswiniachu-je9pn]

How do hover and mouse enter work together? For example, when I hover over Resources, the color has to change and the drown drop has to open all altogether. How it's possible?

[@Camedy123]

Got the same problem, but looks like it's not possible. Probably there is another way to prototype the dropdown part

[@rajandehiri7004]

Add a delay to mouse enter (1ms) that worked for me

[@aryangautm]

thank you so much bro it was really helpful

[@NestorParedes]

Your dropdown link hover 16:04 doesn't work, your arrow icon doesn't face up while hovering 19:26.

[@learntoearn4711]

The problem Is that drop down menu icon didn't change from facing down to facing up

[@ToastOnTheRoad]

Yes, it is possible to do that?

[@zickmho]

This only works if you enter your mouse inside the dropdown, otherwise it will remain opened if you do not enter the mouse

[@muhammadyusufsuryakusuma8270]

Thank you for all the video learning series

[@ЕваНародицкая]

Hi! Thank you for a great tutorial! I have an issue with "about us" section of the menu. When I hover over "Resources" button, "resources dropdown" menu opens, and every part of it works perfect. Then if I do not move my mouse on the "resources dropdown" menu panels and continue moving it on the main menu panel to the "About Us" section, it is not active, and the dropdown menu remains open. How can I fix that?

[@wisdomezeogu6650]

Really nice. Thank you for sharing. So helpful.

[@devinjohnson261]

Thanks so much! Only issue I'm having is if I dont put my mouse into the dropdown menu theres no way for it to disappear.. I thought maybe giving the header a "Mouse Leave" > "Close Overlay" but not a solve. Any ideas?

[@papagooseonline]

I have the same problem, still no solution. If you found one please share.

[@pixeleandocancun]

Same here :c even the other buttons hover animation "freeze" when the submenu appears. It´s like the active area of the upper part of the submenu became the whole menu as well...

[@wekidp982]

thanks bro this tutorial is very usefull for my project :)

[@fredericgrangier7706]

Thank you for the tutorial, great job. If you insert an instance of the component in another page that doesn't work . Do you have any solution ? Thanks

[@mavidesign]

Unfortunately I'm unable to determine the issue with your projects from your description alone --------- To get more specific help and feedback with your project, please join my free Discord server. You can send me an Instagram DM or reach out to my email (About section of my channel) to get your invite. I'm unable to help everyone over KZbin - thank you for your understanding! Mavi

[@alekoindustries]

Is there a way to navigate from the dropdown menu to another page, and then also auto-scroll to a specific section? For example: 1. I am at the HOME page and I want to go to the ABOUT page. 2. The ABOUT page has a FAQ section at the bottom of the page. 3. In the top menu there is a button for ABOUT that also is a dropdown menu. 4. In the dropdown menu, many buttons correspond to the content of the ABOUT page. 5. At the bottom of the dropdown menu, one button says FAQ. So what I want to do is, on the HOME page, open the ABOUT dropdown menu and select FAQ. It should take me to the ABOUT page and then auto-scroll to the FAQ section at the bottom of the page. I hope I'm explaining myself clearly. Please! send help! Thanks!!!

[@marcelbonfim6297]

Awesome! Thank you!

[@mustofa2509]

Why don't I have this feature?

[@abdullahigiwa2719]

You can't close the overlay without hovering on the drop-down

[@bandungmee]

Why in my Figma, under the current variant, there is only one column Property, there is no state or type? thanks

[@skottmellins4584]

Man, I would like to congrats you so much… your tutorials are superb. Thank you for that work you’ve done. It’s a gold mine for me. So much thank you. Could you also make an easy to digest tutorial on variables, because I have problem to Wrap my heap around this topic ? Also, one big question please… how could I be sure, that my header content is above the fold in figma since there Is no above the fold tool like, in adobe XD? Thx

[@davidcubides3402]

Thanks for this resource!!!!

[@inuyasha561]

This is too good thank you so much again!

[@smilli6415]

can you do a course on designing with ios or material guidelines

[@ismooooo]

another banger

[@CarlosDominguez-ue3kn]

Thank you for the great video, I've been following the series without problems until episode 9, when I click on the FAQs I can no longer scroll to the bottom of the footer, and the footer is less visible the more FAQs I open. Do you have any ideas on how to fix this?

[@mavidesign]

Thank you !! I'd have to see the source file to determine what's the problem. Feel free to reach out to me via email or Instagram

[@foXydelmoXy]

Tell me if u fixed that problem... I have it too

[@vamboo8918]

thanks

[@MohitSharma0813]

I'm having problem with the alignment of that arrow it seems good in component but differs in child component as well as in prototype, can you help me with that.

[@smilli6415]

man i am lost half way through

[@ytRap007]

thanks

[@mariadecat]

Any ideas why I can't set the Resources to Resources Dropdown interaction? When I select "Mouse enter" and "Open overlay" I don't have an option to select my resources dropdown... Super weird.

[@mariadecat]

Okay so I found out why. Because I had put all my components including the menu in a frame to keep everything organized.

[@euge_dk]

@@mariadecat THANK YOU SO MUCH FOR LEAVING THIS COMMENT 😭 I've been going crazy trying to make the overlay and it wouldn't make the connection to the dropdown

[@egor1381]

I still cant figure out why i can't select it. Could you help me out?

[@euge_dk]

@@egor1381 hi! You have to put the components in a different frame. Once you move the components to the frame try to do the overlay

[@roomathousandyearswide]

Thank you, but even at 1.75x speed it felt too slow and long winded. You could assume that most of us understand how to make chevrons and so on, just stick to the interaction we are here for. I appreciate none the less

[@j33t78]

🔥🔥 awesome

[@olumidebenjamin6418]

thank you

[@krule0041]

7:41 i cant see that state menu.

[@sanskaryadav1119]

when i hover over the resources dropdown, the dropdown menu keeps flickering

[@yzniinja]

ive got this too!

[@wailingwizard]

I fixed this bug by adding a 200ms delay on the overlay interaction.

[@yzniinja]

after hours of head scratching i found this too - so weird such a simple prototype needs some 'hacking' to work @@wailingwizard

[@KylerS33n]

2:45

[@amyhorowitz5885]

Sound quality is rather poor -he's mumbling & it's impossible to see his cursor.

[@artronny]

too long video and unfortunately I didn't understand :(

[@creativBaba]

wow this was really helpful, thanks