WEB DESIGN IN FIGMA ep.11: Dropdown Menu Navigation - Free UX / UI Course
Вставка
- Опубліковано 12 лют 2023
- 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 - Навчання та стиль
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!
Thank you for your support, Jess!! Glad you found this series helpful!
@@mavidesign Good for a Coffee Time ☕☕☕
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!!!
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.
*Your channel is underrated*
They're really helpful contents. Not usual stereotype contents. I love it. Keep it up!
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!!!
Resources doesn't get bold when you hover on it
Wow! what a episode these is. Thanks for sharing these awesome.
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?
This is such a helpful tutorial. Thank you so much!
Thank you so much. I have been confused with Hover and Mouse Enter
This is too good thank you so much again!
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 👍
It was causing trouble initially but when I changed the timing for overlay to close a bit, it worked.
WHAT WORKS FOR ME: under the "close interaction" add a delay of 100ms!
Can you please share the figma file or made a community page on figma..?
thank you!@@lynnduong7525
Hi! A great lesson!
But the "Hovering" function does not work on the main element, before the dropdown
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?
Thank you for all the video learning series
By far the best and most useful tutorial for building a real flexible menu. Zhank you so much.
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.
I am also struggling for the same could you pls let me know how can we fix this and apply hover value.
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.
I fixed it by adding a delay of 1ms to the mouse enter interaction
Really nice. Thank you for sharing. So helpful.
Thanks for this resource!!!!
Great tutorial, thanks :)
Is there a reason the drop-down menu wasn’t made into a component?
thanks bro this tutorial is very usefull for my project :)
overlay is blinking while hover the mouse on resourcs
ive got this too its suck in a cycle
🔥🔥 awesome
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
another banger
Resources menu does't change color when on hovering
can you do a course on designing with ios or material guidelines
thank you
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
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?
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.
thanks
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?
I have the same problem, still no solution. If you found one please share.
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...
The problem Is that drop down menu icon didn't change from facing down to facing up
Yes, it is possible to do that?
Why in my Figma, under the current variant, there is only one column Property, there is no state or type?
thanks
Your dropdown link hover 16:04 doesn't work, your arrow icon doesn't face up while hovering 19:26.
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?
Got the same problem, but looks like it's not possible. Probably there is another way to prototype the dropdown part
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
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 UA-cam - thank you for your understanding!
Mavi
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!!!
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?
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
Tell me if u fixed that problem... I have it too
man i am lost half way through
7:41 i cant see that state menu.
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.
Okay so I found out why. Because I had put all my components including the menu in a frame to keep everything organized.
@@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
I still cant figure out why i can't select it. Could you help me out?
@@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
2:45
when i hover over the resources dropdown, the dropdown menu keeps flickering
ive got this too!
I fixed this bug by adding a 200ms delay on the overlay interaction.
after hours of head scratching i found this too - so weird such a simple prototype needs some 'hacking' to work @@wailingwizard
Sound quality is rather poor -he's mumbling & it's impossible to see his cursor.
too long video and unfortunately I didn't understand :(
wow this was really helpful, thanks
thanks