Making a Dropdown Menu

You can make a dropdown menu on your page without having to know JavaScript.

  1. Make buttons out of text or image objects.
  2. Stack one on top of the other. The top button will be always visible and will display the menu name. The buttons below it will be the dropdown menu options.
  3. Create a temporary group. This will be your first group of buttons. (For more information, see Temporary Groups.)
  4. Copy and paste the group to create a second group of buttons. (For more information, see Copy Object.)
  5. Apply contrasting shading to the menu name button on the first group of buttons.
  6. Apply the same shading to the menu option buttons on the second group of buttons.

 

Apply contrasting shading to the two groups of buttons.

  1. Set the Z-order (layer) of the second group of buttons to be above the first group of buttons. (For more information, see Z-Order (Layers).)
  2. Assign navigational hyperlinks to each of the second group of buttons. (For more information, see Hyperlinking.)
  3. In the Mouse Trigger Effect dialog box, assign a mouse-over effect to the first menu option button of the first group of buttons to show its counterpart in the second group of buttons, but only if the first menu option button is visible. (For more information, see “Mouse Trigger Effect Dialog Box.”)
  4. Repeat step  for the remaining buttons in the first group of buttons.
  5. Form a permanent group out of the first group of buttons. (For more information, see Permanent Groups.)
  6. Make a note of the object name of the menu name button in the first group of buttons. This will make it easier to set the next mouse effect.
  7. In the Mouse Trigger Effect dialog box, assign a mouse-over effect to the menu name button in the first group of buttons to show the permanent group you created in step , and then make it disappear when the mouse is moved off by clicking the One Time Action option box.

Instead of "mouse pointer is over", you could use "mouse button is pressed on". This means that the menu drop-down would be activated with a click instead of a mouse over.

  1. Click and drag the second group of buttons, and position it to be superimposed precisely on top of the first group of buttons. (For more information, see Move Object .)

 

Click and drag to superimpose the second group of buttons on top of the first group of buttons.

  1. Preview the page and see that the menu name button from the first group of buttons is all that is visible initially. (For more information, see Preview Page.) Mouse over the menu name button in the first group to show the menu name button in the second group and the menu option buttons from the first group. Mousing over the menu option buttons shows their counterparts in the second group of buttons. Clicking a menu option button will open the page to which you hyperlinked.

 

Previous Next