In this Adobe XD tutorial I’ll show you how to use nested components to create a mega menu with hover sub menu. Subscribe: https://bit.ly/2AQm1x
Prototyping starts at 17:15
The Mega Menu is a very common navigation found across larger websites. In this video we’ll create a left hand version that also includes a sub menu that appears when you hover over it. You could easily expand this menu to show sub menus for every item, and also include hover effects on the hover menu!
Components in Adobe XD are really powerful, and if you can learn how to use them in relationship to each other you can create all sorts of different unique UI elements.
#UX&D #AdobeXD #UIdesign
—
❤️ Subscribe to the channel: https://bit.ly/2AQm1xh
🐦 Follow UX&D on twitter: https://twitter.com/UX_and_D
💵 Buy design resource files: https://gumroad.com/uxandd
—
Top Adobe XD tutorials
⭐️ Wireframing in Adobe XD: https://www.youtube.com/watch?v=urzT_2sVZzo&t=25s
⭐️Why and how to use UI kits in Adobe XD: https://www.youtube.com/watch?v=82OcSEKNecA&t=21s
⭐️ How to use the grid tool in Adobe XD: https://www.youtube.com/watch?v=QuRgO0AZwjQ&t=15s
⭐️ How to create inner shadows in Adobe XD: https://www.youtube.com/watch?v=p-cf19gUxy4&t=42s
⭐️ How to mask in Adobe XD: https://www.youtube.com/watch?v=1u9bsMkTVac&t=5s
—
source
Hey there folks, quite a long tutorial for you today. If you just want to see how to create the animation, then jump to 17:15, link is in the description. Otherwise enjoy the video, I hope you find it valuable <3
Please, how did you create Main component in main component and not turned to instant component ?
I honestly find it much easier to create this in webflow its less glitchy and its actual code afterwards
Thank you very much, I learned a lot from you 😍😍😍😍😍
Seems complex at first but can't wait to give it a try
Hi, I can see that the roll over detection (pause video at 22:02 to see) starts as soon as the mouse enter the bounding box of the big component instead starting when the mouse would enter the Flights button. How do you make the detection zone only on the Flight button ?
It is too detailed i am confused
Thanks for this video !!
Any idea how to give link to other artboard via this component state??
Heya, I'm a bit stuck and was wondering if you could help me. So I've got my menu to work for the hover and a drop-down appears. But I can't seem to hover over to the next icon for the next set of menu items. Any idea how I resolve it?
This is exactly what I was looking for. Thank you. 🙂
Hello, thank you for the video, was following it and recreated it, at the end however I had a problem when I tried to create a component for hover and sub menu. When a clicked to make a component it got created, but then I didn't have the + sign to add a hover state for that. Only the pen icon was there to edit the main component. Do you know how to fix it and why is it so?
Really useful tutorial thank you..but I have a 1 question..As a example In your tutorial you hover on plane icon there is mega menu.and the mega menu component state covers the "Ferries " icon area..Then if we hover on Ferries icon is it possible to make mega menu when hover on it ? I tried so many ways but it cannot be possible because Flight component covers the down area so how to create 2 mega menus on hover for Flight icon and Ferries icon in turn.
( accullay sorry for my english but I think you can understand what I say )
Thanks for your great tutorial.
I'm facing an issue and wanted to see if you have a work around for this. If the content behind the extended menu has any button or interaction, they are remain active. The hand cursor keeps showing up where such triggers exist behind the extended part. Is there a solution to avoid this?
Muy bueno! Muchas gracias!
Is there a way to make the top level component (main menu) hoverable as well as the component nested (flights) be hoverable? I can't seem to get it to work.
Awesome, thanks you so much!!!!!! 👍👍👍👍👍👍👍👍👍👍👍