6 Replies Latest reply on Aug 17, 2009 3:28 PM by Peter Flynn (Adobe)

    Button on top of another button

    jasonjam Level 1



      I'm trying to create a dropdown menu and I hope someone can help. I created two buttons, the first has the main menu and dropdown graphic and the second has the menu text with a rollover.


      The problem I'm facing is when the dropdown displays and I rollover the menu text the dropdown goes away.


      Any input on how to put a button on top of another would help.





        • 1. Re: Button on top of another button
          Matt Cannizzaro

          Try converting both your buttons into a single custom component. You can then give the component two states - one where the dropdown is hidden, and the other where it's visible. Once this is done, you can use the interactions HUD to show the dropdown when you roll over the component and hide the dropdown when you roll out.


          Here are the basic steps:

          1. Select you buttons.

          2. In the HUD, choose Convert to Component > Custom / Generic Component.

          3. Double click on the new component to edit it.

          4. Duplicate the state, and make the changes in each state so that the dropdown is only visible in one state. You might want to also rename the states (double click their names in the states panel).

          5. Double click outside the component to leave edit in place.

          6. With your component selected, set up interactions to transition between the two states on roll over / roll out.

          7. Run your project and check that it works.


          Once you've done this, you can tweak the transition between the two states in the timelines panel.

          • 2. Re: Button on top of another button
            jasonjam Level 1

            Thanks for the response Matt but my dropdown has three states. The third being a rollover for menu item in the dropdown. I'm having difficulties with the custom interactions.





            • 5. Re: Button on top of another button
              ansohano Level 1

              Can you please explain yourself better? This can be of many reasons..

              • 6. Re: Button on top of another button
                Peter Flynn (Adobe) Adobe Employee

                Hi Jason,


                You should be able to solve this via nested components.  Think of it this way: your overall dropdown/button only has two states: dropdown visible, and dropdown invisible.  Then within the dropdown, each menu item has two states: normal, and rollover.


                You can crease the overall dropdown/button widget as a "Custom/Generic Component" the way Matt described earlier.  The dropdown menu itself can either be a Data List, or a vertical stack of Button controls.  In either case, you can double-click this control to drill down and edit the appearance for the rollover state.


                Does that make sense?


                - Peter