• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
2

[Prototype]-How to create a hover dropdown menu in XD?

New Here ,
Jan 31, 2020 Jan 31, 2020

Copy link to clipboard

Copied

Hi there,

 

I'm just wondering if there is a way to create "hover" micro interactions in XD?

 

For example, when I hover my mouse over a nav, i'd like a dropdown menu to appear.

 

<The Title was renamed by moderator>

TOPICS
How to , Prototyping

Views

16.6K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jan 31, 2020 Jan 31, 2020

Copy link to clipboard

Copied

Hi, I suggest you follow this tutorial: https://www.youtube.com/watch?v=ZII1R1GPwF0

Today we are designing some cool Hover Dropdown Menu Animations in Adobe Xd using auto animate and hover triggers. Hover triggers in Adobe Xd are super helpful, especially when used with Component States. I am attaching the Adobe Xd file below: Adobe XD File: http://bit.ly/hoverdropdown Join the ...

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Mar 19, 2020 Mar 19, 2020

Copy link to clipboard

Copied

It seems "menga menu" cannot be acheved with the current hover interaction feature...
Do you have any idea how it could work?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Employee ,
Mar 26, 2020 Mar 26, 2020

Copy link to clipboard

Copied

Hi there,

 

I would suggest submitting a feedback request here: https://adobexd.uservoice.com/forums/353007-adobe-xd-feature-requests and share the link with us for tracking purpose.

 

Thanks,

Harshika

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Mar 27, 2020 Mar 27, 2020

Copy link to clipboard

Copied

You can create an example (one scenario of artboards/steps) which shows how such a hover menu would appear, but you'd need multiple steps to mimick the operation of the whole menu, if you really need or want to do so. The current approach in XD for prototyping interactions in combination with hovers is flawed. Read this thread to learn more about it:

https://community.adobe.com/t5/adobe-xd/prototype-menu-dropdown-with-hover-effect/m-p/10999103

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jun 16, 2020 Jun 16, 2020

Copy link to clipboard

Copied

Hello,

I am new to Adobe Xd and looking for a simple drop down menu. I found a few videos but nothing I like and simple to use. I did find one with using States but it doesn't show the 5 hoover drop down vertical menu that is what I am searching for. Can anyone give me some information on this subject.

 

Thank you,

Kathy

kathylaborde7@gmail.com

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jun 17, 2020 Jun 17, 2020

Copy link to clipboard

Copied

Can you explain what is "5 hoover drop down vertical menu" you are after? A drop down menu with 5 levels?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jun 17, 2020 Jun 17, 2020

Copy link to clipboard

Copied

Hello,

I mean I have 5 navagation links I want to hoover over with a drop down list. The videos I have been reviewing have a flyout menu or you just click on the arrow and all the links appear. I don't want to use several artboads. This new Adode Xd version I believe you can have one artboard and use states. Any help or template would be appreciated.

Thank you,

 

drop down url

Thank you,

Kathy

<Personal Info Removed By Moderator>

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jun 18, 2020 Jun 18, 2020

Copy link to clipboard

Copied

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Aug 14, 2020 Aug 14, 2020

Copy link to clipboard

Copied

Hello @kennethkawamoto2

 

Could you send me your file with the hover effect because i have problem et what you did is exactly what i want to do. Thank you in advance.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Aug 15, 2020 Aug 15, 2020

Copy link to clipboard

Copied

DM me

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Oct 26, 2020 Oct 26, 2020

Copy link to clipboard

Copied

Hello @kennethkawamoto2

 

Could you send me your file with the hover effect too because I also have a problem and what you did is exactly what I want to do  Thank you in advance. 

 

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Oct 27, 2020 Oct 27, 2020

Copy link to clipboard

Copied

Hi Kenneth,
Using Dropdown in states takes sometime but it does work not the way I like it. I create a few artboards and wireframe the menu items to connect to the next menu.

 

https://xd.adobe.com/view/b061faf6-6106-4a66-ab22-924234377801-e532/

 

Here is the wireframes that you will need to click on.

Click Menu 1
Click Item 1a
Click Menu2
Click Item 2a
Click Menu 3
Click Item 3a
Click Menu 4
Click Item 4a
Click Menu 5
Click Item 5a
Click Menu 5 Note*This will bring you to the beginning of your drop down.

Here is how you can link a Menu item to a webpage. XD doesn’t have insert links

Click Menu 1
Click Item 1a
Click Item 1aa
Click Menu 1 Note* This will bring you to the beginning of your drop down.

I hope this help.

Kathy Laborde

kathryn.laborde@saic.com

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Aug 17, 2020 Aug 17, 2020

Copy link to clipboard

Copied

@kennethkawamoto2 you gave me a bit of hope, I thought "hey, maybe they actually fixed it", then I realized the dropdowns also activate if you hover over the area below the buttons.

I also assume it only works if the dropdowns are the exact width of the button and don't extend below the other ones, which eliminates 90% of the use cases 😕

 

Will keep on waiting for the feature that allows one component to trigger another's state...

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
May 28, 2021 May 28, 2021

Copy link to clipboard

Copied

Hi Kenneth,

Can you share how you made that?

Thank you!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Employee ,
May 28, 2021 May 28, 2021

Copy link to clipboard

Copied

LATEST

Hi Martina, 

 

Thanks for reaching out. Please refer to this tutorial https://www.youtube.com/watch?v=ZII1R1GPwF0 and let us know if this helps or if you need any further assistance.

 

Regards

Rishabh

Today we are designing some cool Hover Dropdown Menu Animations in Adobe Xd using auto animate and hover triggers. Hover triggers in Adobe Xd are super helpful, especially when used with Component States. I am attaching the Adobe Xd file below: Adobe XD File: http://bit.ly/hoverdropdown Join the ...

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines