Nested Menu with Overlay

[sim ar]

 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.

[Spas K.]

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!

[sim ar]

[sim ar]

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.

[Spas K. · Accepted solution]

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?

[sim ar]

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.

 

  

[Spas K. · Accepted solution]

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.

[sim ar]

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.

[Spas K.]

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...