How to make drop down menu dissapear after clicking one of the options

[Bogdan Novaković]

Hello everyone, XD beginner here.

I'm making my first website basically, and I have the following issue:

I have a drop-down menu, which has a default state and active state. The default state just shows three horizontal lines (it's for mobile) which, when tapped on, open a drop down menu with 'about us', 'services', 'references' and 'contact' buttons respectively. Clicking on any of these buttons scrolls down to their respective segments just fine, but the drop down menu remains, covering a large portion of the screen, which means that the user would have to close it manually (I've made a button for it as well).

I'd like for the menu to revert to its default state, the three lines, as soon as the user taps on one of the options, and the website scrolls to that segment.

So the sequence would be - user taps on three lines -- menu drops down -- user taps on one of the options -- the website scrolls to relevant segment, and the menu goes up again into default state, the three lines, ready to be tapped again if necessary.

I can't wire the buttons to have two tap interactions at once, so what's the best workaround for this?

Thanks in advance.

[Spas K.]

Hey there. I'm afraid with Xd's current capabilities there's no way to achieve this, as it only allows one interaction to happen at any given moment. There is a way to simulate it using two artboards, but it will be simply for demonstration purposes. You can have one artboard where you open the menu, and once an item is clicked, you transition to a second one with auto animate, where you manually move all the elements up (to imitate the scroll to a section), and hide the menu.

If you want to have only the one artboard, as you've discovered, with component states you can't make the component switch back to the default state and scroll down at the same time. The only way it can work is if the menu is opened upon hover, rather than click. This way once you click on the item, the page scrolls down, and the hover state is deactivated so the menu is hidden again.

[Kenneth Kawamoto]

Tap on a menu item scrolls the content and retract the drop menu:
https://xd.adobe.com/view/316ac923-4af4-479a-98dd-9bf3bdb0f361-6439/?fullscreen
This is one artboard - is this close to what you are after?

[Bogdan Novaković]

Yes, Kenneth, exactly!

Is it possible to make in xd?

[Kenneth Kawamoto]

Yes, I made it in XD (obviously 😁)
The trick is to make the whole thing as a component.

The component has four states in this example:

• Default
• Default with drop menu visible
• Scrolled
• Scrolled with drop menu visible

Then simply switch the states with auto-animate, using the menu items as triggers.

You can download the XD file from here if you like:

https://www.dropbox.com/s/ofkdypadbnqkcoo/mobile-menu.xd?dl=0