Skip to main content
B
Bogdan Novaković
Participant
March 31, 2023
Question

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

  • March 31, 2023
  • 2 replies
  • 1445 views

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.

This topic has been closed for replies.

2 replies

K
Community Expert
Kenneth KawamotoCommunity Expert
Community Expert
March 31, 2023

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?

    B
    Bogdan NovakovićAuthor
    Participant
    March 31, 2023

    Yes, Kenneth, exactly!

     

    Is it possible to make in xd?

    K
    Community Expert
    Kenneth KawamotoCommunity Expert
    Community Expert
    March 31, 2023

    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

      Spas K.
      Community Expert
      Spas K.Community Expert
      Community Expert
      March 31, 2023

      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.

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices