WEB DESIGN IN FIGMA ep.11: Dropdown Menu Navigation

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

Рет қаралды 78,411

Жыл бұрын

Visit my STORE: bit.ly/mavi-design-store
Explore Mavi Design COURSES : bit.ly/mavi-design-courses
Download FIGMA for FREE: bit.ly/get-started-with-figma
Take FULL advantage of ALL FIGMA's features: bit.ly/figma-professional-plan
FREE FIGMA COURSE / SERIES: Design a Website in Figma: • FREE Figma Web Design ...
In the eleventh episode of “Designing a Website in Figma”, we’re going to create a functional dropdown menu navigation prototype that will enable us to go through individual pages. Expanding on the last episode where we created a global navigation prototype, we’re going to take it one step further in terms of complexity and create a functional drop down menu navigation in our website prototype.
How to create a functional dropdown menu for your website with hover states in figma - Figma Prototyping Tutorial - Free UX / UI Course in Figma - great for beginners
--------
© 2023 Mavi Design

Пікірлер: 74

@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 11 ай бұрын

@@mavidesign Good for a Coffee Time ☕☕☕

@Dobeedoagency 4 ай бұрын

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.

@saljugmahmudlu Жыл бұрын

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

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

@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 10 ай бұрын

thank you!@@lynnduong7525

@karinakim5516 8 ай бұрын

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

@maryamshabafrooz2664 10 ай бұрын

Resources doesn't get bold when you hover on it

@alexandernemec751 10 ай бұрын

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 17 күн бұрын

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

@ahsunhabibrasel 3 ай бұрын

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

@MukulDevKallara Жыл бұрын

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

@TurboldBatsukh-yt9eh 7 ай бұрын

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

@camillestarr9109 4 ай бұрын

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

@simbawonwon 11 ай бұрын

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 10 ай бұрын

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

@wailingwizard 7 ай бұрын

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 5 ай бұрын

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

@muhammadyusufsuryakusuma8270 3 ай бұрын

Thank you for all the video learning series

@inuyasha561 10 ай бұрын

This is too good thank you so much again!

@lanyagilcalderon5960 4 ай бұрын

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?

@wisdomezeogu6650 7 ай бұрын

Really nice. Thank you for sharing. So helpful.

@davidcubides3402 7 ай бұрын

Thanks for this resource!!!!

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

@mrwaseem1276 Жыл бұрын

overlay is blinking while hover the mouse on resourcs

@yzniinja 7 ай бұрын

ive got this too its suck in a cycle

@wekidp982 4 ай бұрын

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

@ismailmohamed8451 5 күн бұрын

another banger

@j33t78 Жыл бұрын

🔥🔥 awesome

@MrBalloonatic Жыл бұрын

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

@skottmellins4584 10 ай бұрын

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

@olumidebenjamin6418 Жыл бұрын

thank you

@vamboo8918 20 күн бұрын

thanks

@smilli6415 Жыл бұрын

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

@kikirinzani6351 Жыл бұрын

Resources menu does't change color when on hovering

@user-sj9rl8tj2d 5 ай бұрын

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?

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

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

@bandungmee Ай бұрын

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

@NestorParedes Жыл бұрын

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

@fredericgrangier7706 7 ай бұрын

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 7 ай бұрын

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 KZfaq - thank you for your understanding! Mavi

@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 21 күн бұрын

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

@devinjohnson261 5 ай бұрын

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 4 ай бұрын

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

@pixeleandocancun 3 ай бұрын

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

@KylerS33n 2 ай бұрын

2:45

@alekoindustries 5 ай бұрын

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!!!

@CarlosDominguez-ue3kn 8 ай бұрын

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 8 ай бұрын

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 5 ай бұрын

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

@krule0041 4 ай бұрын

7:41 i cant see that state menu.

@mariadecat 10 ай бұрын

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 10 ай бұрын

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 7 ай бұрын

@@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 6 ай бұрын

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

@euge_dk 6 ай бұрын

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

@smilli6415 Жыл бұрын

man i am lost half way through