Adding a dropdown menu to your page

This guide shows how to create a simple dropdown menu.  Here is an example:


The implementation of the dropdown menu consists of the following parts:

  • an activation button that you click to display a dropdown menu.
  • a dropdown menu that contains one or more navigation links.
  • javascript that detects a button click and toggles between showing and hiding your menu.



Step 1 - Download the Dropdown Javascript File

Download the file below and then unzip it to your computer so you are left with a dropdownmaster.action.js file which will be dragged onto your page after building your menu.

dropdownmaster.action.js.zip

Step 2 - Create Your Dropdown Activation Button

  • Your button will typically be an image, a text box, or a shape like a rectangle or a circle.  
  • Once it has been created and styled to your liking, if there is more than one object involved, be sure to group them into one object using the ARRANGE tab.   



Step 3 - Hyperlink Your Button

In order for the javascript to run properly you need to click the Hyperlink checkbox in the LINK tab.  To do this, click your button object to select it and go to the LINK tab, then click the Hyperlink box.  


See the following demonstration.




Step 4 - Create Your Dropdown Navigation Menu

  • Create your menu using images, rectangles, text boxes etc. For a basic menu, it can be as simple as a word of text for each link.
    • Once you've created and styled the dropdown menu to your liking, and set up the links, you will need to group all the objects in the menu together as one object. 




See the following demonstration.





Step 5 - Activating Your Dropdown Menu

  • Select both the activation button and the dropdown menu objects by holding shift and selecting both objects.
  • Drag the javascript file you downloaded in Step 1 (dropdownmaster.action.js)  and drop it anywhere on your page.


STEP 6 - Adjusting your Dropdown Menu Settings/Effects

  • Select your new dropdown grouping and hit J then S on your keyboard to open up your Javscript Editor. You should see the following:
  • Here you are able to adjust your various dropdown settings including the following:
    • Trigger: You can adjust this to activate on hover (mouseover) or by click
    • Transition: This will set your dropdown to either fade or slide in, or just appear if you select none.
    • Speed: This is the speed in which the transition effect occurs in miliseconds. This will help for making either a quicker or slower fade/slide in.
  • Ensure that when replacing 'hover' or 'fade', that you keep them within the single quotations. Example: 'click', 'slide'.
  • Save & Close the Javascript Editor once your changes are made.

Save your page and View Live to test your dropdown menu.



See the following demonstration.









Was this article helpful?
Thank you for your feedback!