Highlighted

Nested Menu with Overlay

Community Beginner ,
Jun 18, 2020

Copy link to clipboard

Copied

 I am working on a project that requires Nested Menu Options with Overlay.
I applied Overlay to the Menu Art-board, Set A. 
For the next set of drop-down, set B.
- I duplicated the first overlayed menu art-board. I created a mask to show the drop-down. Once I click on set A to get the next Set B the overlay on the home screen is not working.
Set B artboard does not overlay on the Home screen, a black screen appears instead.
Please help me with this. I tried to find a solution for the nested Drop-down menu with an overlay prototype option there is nothing on the internet. Any workaround to create this. thank you.
Overlay with Set A is working fine, after clicking on set B there is nothing.
 
 
Adobe Community Professional
Correct answer by Spas K. | Adobe Community Professional

Yeah, well, Xd is still a bit clunky with these things, if you transition between 2 overlays it kinda removes the first one, and then starts the animation for the second one. There isn't an overlap between them at any point.

 

As a result you get this cutoff when switching overlays, and the smoothest thing you can get is to have no transition animation between them which looks the most seamless, but yes - you can't use auto-animate and overlay at the same time. 

 

The only way to do this with a nice animation and proper functionality would be separate screens that have the different versions of the menu, so for each of your screens you need to have like 3-4 more with the different menu sections, and that I imagine would be a nightmare. I would do it for one screen to show the animation, and have the overlays with no animation for the rest of the prototype.

 

As a whole right now Xd is more suitable for testing user flows / wireframes, maybe some animations, but not a fully-fledged prototype with advanced animations / interactions.

Views

77

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

Nested Menu with Overlay

Community Beginner ,
Jun 18, 2020

Copy link to clipboard

Copied

 I am working on a project that requires Nested Menu Options with Overlay.
I applied Overlay to the Menu Art-board, Set A. 
For the next set of drop-down, set B.
- I duplicated the first overlayed menu art-board. I created a mask to show the drop-down. Once I click on set A to get the next Set B the overlay on the home screen is not working.
Set B artboard does not overlay on the Home screen, a black screen appears instead.
Please help me with this. I tried to find a solution for the nested Drop-down menu with an overlay prototype option there is nothing on the internet. Any workaround to create this. thank you.
Overlay with Set A is working fine, after clicking on set B there is nothing.
 
 
Adobe Community Professional
Correct answer by Spas K. | Adobe Community Professional

Yeah, well, Xd is still a bit clunky with these things, if you transition between 2 overlays it kinda removes the first one, and then starts the animation for the second one. There isn't an overlap between them at any point.

 

As a result you get this cutoff when switching overlays, and the smoothest thing you can get is to have no transition animation between them which looks the most seamless, but yes - you can't use auto-animate and overlay at the same time. 

 

The only way to do this with a nice animation and proper functionality would be separate screens that have the different versions of the menu, so for each of your screens you need to have like 3-4 more with the different menu sections, and that I imagine would be a nightmare. I would do it for one screen to show the animation, and have the overlays with no animation for the rest of the prototype.

 

As a whole right now Xd is more suitable for testing user flows / wireframes, maybe some animations, but not a fully-fledged prototype with advanced animations / interactions.

Views

78

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

Copy link to clipboard

Copied

Can you share a screenshot of the artboards, or even better - the file, so we can see what's going on?

Not sure if I fully understand how it is set up.

Cheers!

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 ,
Jun 18, 2020

Copy link to clipboard

Copied

Screenshot 2020-06-18 at 9.06.09 PM.png

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 0
Community Beginner ,
Jun 18, 2020

Copy link to clipboard

Copied

I Hope you can understand,

I tried to open the sub list as an overlay to the last artboard but I get a flash of a black background.

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

Copy link to clipboard

Copied

Can you send a screen from the "Prototype" tab, with all artboards selected, so I can see the links?

I quickly replicated your screens and it works for me.

If I understand correctly, when you tap on "Sub List 1" on your 3rd artboard, instead of opening the Sub List 1, you get a black screen?

screen2.png

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 ,
Jun 18, 2020

Copy link to clipboard

Copied

Thank you for trying this. 

I made all my buttons as components with hover.

The mistake I made was when I linked my button to the 3rd artboard with the sub list I didn't choose the overlay as you did. 
I had created a mask for the sublist to give drop-down animation. Now I'm not getting a black screen. but my animation for dropdown is not good. I chose dissolve option. So it is uploading the menu again entirely.

Screenshot 2020-06-19 at 11.30.34 AM.png

  

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

Copy link to clipboard

Copied

Yeah, well, Xd is still a bit clunky with these things, if you transition between 2 overlays it kinda removes the first one, and then starts the animation for the second one. There isn't an overlap between them at any point.

 

As a result you get this cutoff when switching overlays, and the smoothest thing you can get is to have no transition animation between them which looks the most seamless, but yes - you can't use auto-animate and overlay at the same time. 

 

The only way to do this with a nice animation and proper functionality would be separate screens that have the different versions of the menu, so for each of your screens you need to have like 3-4 more with the different menu sections, and that I imagine would be a nightmare. I would do it for one screen to show the animation, and have the overlays with no animation for the rest of the prototype.

 

As a whole right now Xd is more suitable for testing user flows / wireframes, maybe some animations, but not a fully-fledged prototype with advanced animations / interactions.

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 ,
Jun 18, 2020

Copy link to clipboard

Copied

You are right, it would be crazy to manage all those artboards along with the dozen more for the project.

I did try this last week and since I did not get a smooth transition I thought I was doing something wrong.

The drop-down animation works perfectly without the overlays.

 

Thank you so much for your time.

I had a tuff time with this issue for almost a week now.

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 0
Spas K. LATEST
Adobe Community Professional ,
Jun 19, 2020

Copy link to clipboard

Copied

Hey, actually, there is a way to make this work with one overlay.

1. Make a component that contains the whole menu.

2. Within that component, make each menu section as a group.

3. Make different component states for each opened section, with the others closed.

4. Add Tap interactions to each group that points to the opened state for that group, with an auto-animate.

 

You can check this thread, there's a sample file in the comments:
https://community.adobe.com/t5/adobe-xd/design-how-to-design-accordion-component-with-single-artboar...

 

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 19, 2020 1