Need help with hamburger dropdown in XD

[sig.raJo]

Hello, all. I'm trying to create my first hamburger dropdown in XD. I've hidden the Services section behind the sections above it (nav, Home, and About Us sections.)

Only Services should be active as dropdown on click, however, when dropdown is hidden, because of its length I think, clicking on the logo, Home, and About Us triggers the dropdown, which I don’t want.

Any ideas how I can prevent this? I'm including screenshots of Home screen, overlay, and the specific screens in XD with states. Thank you!

[AkinGn]

Hi @sig.raJo, if I'm not missing something, I think I managed to do that by:

1- Creating the menu component

2- Creating a "toggle" state

3- Pasting the dropdown menu to be opened in toggle state

4- Going to prototype mode

5- selecting the menu item that needs to trigger the dropdownand selecting the tap interaction adn selecting destination as toggle state

6- Since the problem is also the whole menu component is set to trigger the toggle state by default, while still in prototype mode, selecting its tap interaction and selecting "none" as its destination (that way we disable the dropdown to be opened whenever we click somewhere else than menu item that has dropdown)

I hope I managed to explain it, here's the sample file: https://www.dropbox.com/s/fzohlry7lv1drqg/dropdown-test.xd?dl=0

and prototype link: https://xd.adobe.com/view/36fcbcd1-33c1-4ad2-a26f-a49ad860d8ee-63af/

Hope this helps!

[sig.raJo]

I also have sections below the dropdown section; will they automatically move up and down when the toggle state is triggered on the item above them?

Thank you!

[sig.raJo]

When I add a menu item below the menu item with toggle in your file, the menu item remains below the open dropdown; I need it to move with the dropdown.

[AkinGn]

Hi @sig.raJo, I did that by creating a copy of the button below the button with the dropdown and pasting it into the dropdown state, that way regrdless of dropdown being open or closed, a copy of the button will be visible, here's the file: https://www.dropbox.com/s/fzohlry7lv1drqg/dropdown-test.xd?dl=0 and the prototype link: https://xd.adobe.com/view/36fcbcd1-33c1-4ad2-a26f-a49ad860d8ee-63af/ Hope this helps!

[sig.raJo]

Oh that is great! Exactly what I am hoping to do. Going to try it out now with my file; when I tried to do it using the original file, it didn't work, I must have done something wrong.

Thank you.

[AkinGn]

I had reuploaded the new file but deleted it and uploaded it again, you can check this one something might have gone wrong with the old link: https://www.dropbox.com/s/or8fz0o4cpnrg93/dropdown-test.xd?dl=0