Nested Menu with Overlay

Question

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. · Accepted Answer

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.

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.

Spas K. · Answer

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!

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded