Expanded menu with hover in the same dashboard

Community Beginner ,
Jun 18, 2020 Jun 18, 2020

Copy link to clipboard

Copied

Hi there, please help me with some info:
I am trying to make a menu with expanded pages. I have created a component when all sections (pages) are closed. Then I added a state for one of the pages open. But when I try to add the interaction (click of "Cards data" in this case), I can't find it in the list. How am I doing that?
Please find attached how it appears.
 
 
MENUS – 1.png
Also, I looked here https://community.adobe.com/t5/adobe-xd/design-how-to-design-accordion-component-with-single-artboar... and I tried to replicate. If I try to drow the menu from scratch it works. the problem is that my menu is composed of many components which already have a hover state, so maybe they interfere? (it work when I try to create it from normal objects, not components). The thing is that I am trying to make an over 50 pages mock-up, as simmilar with reality as possible, and I don't want to create multiple artboards for each state for the menu.
 
Thank you very much.

Views

115

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
community guidelines

correct answers 1 Correct Answer

Adobe Community Professional , Jun 19, 2020 Jun 19, 2020
Put every component inside a group, and add the interaction to the group instead. This way you can keep the hover while linking to a state of the wrapping component.

Likes

Translate

Translate
Adobe Community Professional ,
Jun 19, 2020 Jun 19, 2020

Copy link to clipboard

Copied

LATEST

Put every component inside a group, and add the interaction to the group instead. This way you can keep the hover while linking to a state of the wrapping component.

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
community guidelines