Highlighted

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

New Here ,
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

8.2K

Likes

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

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

New Here ,
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

8.2K

Likes

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
Jan 31, 2020 1
Adobe Community Professional ,
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 helpf...

Likes

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
Reply
Loading...
Jan 31, 2020 2
Explorer ,
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?

Likes

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
Reply
Loading...
Mar 19, 2020 0
Adobe Employee ,
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

Likes

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
Reply
Loading...
Mar 26, 2020 0
Adobe Community Professional ,
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

Likes

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
Reply
Loading...
Mar 27, 2020 1
New Here ,
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

Likes

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
Reply
Loading...
Jun 16, 2020 0
Adobe Community Professional ,
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?

Likes

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
Reply
Loading...
Jun 17, 2020 1
New Here ,
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>

Likes

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
Reply
Loading...
Jun 17, 2020 0
Adobe Community Professional ,
Jun 18, 2020

Copy link to clipboard

Copied

Likes

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
Reply
Loading...
Jun 18, 2020 1
Community Beginner ,
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.

Likes

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
Reply
Loading...
Aug 14, 2020 0
Adobe Community Professional ,
Aug 15, 2020

Copy link to clipboard

Copied

DM me

Likes

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
Reply
Loading...
Aug 15, 2020 1
Adobe Community Professional ,
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...

Likes

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
Reply
Loading...
Aug 17, 2020 1
New Here ,
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. 

 

 

Likes

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
Reply
Loading...
Oct 26, 2020 0
New Here ,
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

Likes

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
Reply
Loading...
Oct 27, 2020 0