Highlighted

Clickable links hover states

Community Beginner ,
Oct 01, 2020

Copy link to clipboard

Copied

Hi, 

I've created a navigation for my prototype. The top level/row of links are clickable to go to other pages/artboards and on their hover state, some of these open a drop-down menu with links. These secondary links should also click through to other pages. I have linked them up, but when I preview nothing happens, they are not clickable. The only way I can click these is to have the drop-down menus already expanded (by defaulting them to the hover state) but obviously this is not what I want to show my client. I feel like this should be simple - any idea what I'm doing wrong? I've tried overlaying transparent shapes that link/overlays etc but to no avail. I would greatly appreciate any tips or an example XD file me could pick apart, thank you. 

Adobe Community Professional
Correct answer by Spas K. | Adobe Community Professional

Remove the hover state from the links in the dropdown. Or make a different component for them.

Nested hovers don't work (yet), and this might be interfering with the links.

 

If it doesn't work, upload the file somewhere and link it here, so we can have a look 🙂

Views

131

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

Clickable links hover states

Community Beginner ,
Oct 01, 2020

Copy link to clipboard

Copied

Hi, 

I've created a navigation for my prototype. The top level/row of links are clickable to go to other pages/artboards and on their hover state, some of these open a drop-down menu with links. These secondary links should also click through to other pages. I have linked them up, but when I preview nothing happens, they are not clickable. The only way I can click these is to have the drop-down menus already expanded (by defaulting them to the hover state) but obviously this is not what I want to show my client. I feel like this should be simple - any idea what I'm doing wrong? I've tried overlaying transparent shapes that link/overlays etc but to no avail. I would greatly appreciate any tips or an example XD file me could pick apart, thank you. 

Adobe Community Professional
Correct answer by Spas K. | Adobe Community Professional

Remove the hover state from the links in the dropdown. Or make a different component for them.

Nested hovers don't work (yet), and this might be interfering with the links.

 

If it doesn't work, upload the file somewhere and link it here, so we can have a look 🙂

Views

132

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
Oct 01, 2020 0
Adobe Employee ,
Oct 02, 2020

Copy link to clipboard

Copied

Hi there,

 

Thanks for reaching out. If I understood correctly, you want the Hover state inside a hover state clickable? If yes, I am afraid, as of now, we don't have this feature in XD, please upvote this request: https://adobexd.uservoice.com/forums/353007-adobe-xd-feature-requests/suggestions/38968075-hover-ins...

 

If that's not the case, will it be possible for you to share a screenshot of the Prototype Window capturing the wired connection? We'll try our best to help you with it.

 

Regards

Rishabh

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 02, 2020 0
Community Beginner ,
Oct 02, 2020

Copy link to clipboard

Copied

Hi Rishabh,

 

It's essentially a click within a hover state. Here's what I have so far 🙂 -

 

 

1. Top nav link default state:
1.png

 

 

2. Top nav link hover state:

2.png

 

 

3. link on the hover state:
3.png

 

Thanks

Ed

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 02, 2020 0
Adobe Community Professional ,
Oct 02, 2020

Copy link to clipboard

Copied

Remove the hover state from the links in the dropdown. Or make a different component for them.

Nested hovers don't work (yet), and this might be interfering with the links.

 

If it doesn't work, upload the file somewhere and link it here, so we can have a look 🙂

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 02, 2020 1
Community Beginner ,
Oct 03, 2020

Copy link to clipboard

Copied

Great thanks so much Spas K, I stripped it back, it was a nesting thing 🙂

 

Ed

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 03, 2020 0