- Edit > Insert > New Button. The button editor window will appear. You can create a button here, but we will import a preset one.
- In the lower left-hand corner of the button editor window, click on Import a button…
- View buttons by clicking on the name – we will use a 2-state button (they all have the same name but look different). When you find one you like, click on Import in the upper right-hand corner of the dialog box. This will place your choice in the button editor window. (You can also import your own button by going to File > Import instead of inserting one)
TIP: Some of the presets have pretty fancy over states. Simpler is probably better for a drop-down menu.
(You can always edit the over state of a preset if you want to.) Also note that a button is not confined to just one behavior!
- Double click on the text twice, or until first the text box appears (a blue square with small squares at the corners), then the word “button” is highlighted.
- Type the text you want for your drop-down button
- Once you have the text as you want it, make sure the Over state of the button is also edited – but this is easy. Just click on the Over tab and answer yes to the dialog box question, “Update text in all states?”
- Then click on Done in the lower right-hand corner of the button editor window.
- Make sure the button is selected. Click on it once if it’s not. (Once selected it will have a small white cross-haired circle in the center, just like the slices we created before.)
-
Click once (left-click) on the small white cross-haired circle. You will get a drop-down menu.
Click on the third choice, Add pop-up menu. The Pop-up Menu Editor will appear.
(You could also add a Pop-up menu by going to Modify > Pop-up Menu > Add Pop-up Menu.)
Notice the four tabs, between which you may move freely: Content / Appearance / Advanced / Position. This first time, though, we will use the Next button, which simply takes us through each one in turn.
- Double click in the space below the word “Text” and add the text of your first Menu item.
- Move to the next horizontal cell (“Link”) with the Tab key. You can use the Tab key to continue adding more items indefinitely; the Tab key creates a new row after the third cell. (You can also move directly down to the next row—i.e., create a new one—by pressing Enter. To edit any of the fields you’ve already entered, just double click on it.)
- Add a Submenu: The easiest way to add submenus is to add all menu items in order (item 1, submenu 1, then item 2 with its submenu, etc.) When done with the complete list,
go back and indent the submenu items with the second of the two blue symbols next to the plus and minus signs. (See below.)
In other words, Submenus are defined purely by the indentation on this screen. In the screen shot above, “Formal” is the last main menu item, with two items
in its Submenu: “How do you do?” and “Good day, sir.” (This is a menu of possible greetings.)
- Click Next when done entering your menu items, links, and submenus. This will simply take you to the next tab of the Pop-up Menu Editor.
TIP: It is possible to move a menu item after typing it in, but you have to have the whole row highlighted before you can drag and drop (whether all fields are filled or not).
- html (text and background color only)
- image (adds preset button-type textures)
- For this tutorial, we’ll keep it simple for now and go with html.
- Select your font and style, and the background color of the cells of your menu in the up state. (We’ll leave the text color as black.)
- Select the background color of the cells in the over state. (A lighter color will make the black text easier to read.) The editor window shows the results of your changes in a sample menu using the text you just entered.
- Click on the cell color of the over state to edit it, then click on the color picker (Looks a tiny circle of color above the pallet). Move the cursor outside of the color pallet window to click on the cell color of the up state. Now they will be the same.
- Then click on the cell color of the over state again, and the color picker, again. Now simply adjust the luminosity by moving the small triangle on the right hand side of the color pallet upwards, toward the lighter end of the spectrum.
- Click Next when done.
TIP: After choosing a color for the up (default) state, you can create a lighter shade of the same color using the color picker.
Having the same color with a higher luminosity is an easy way to create a professional looking drop-down menu (especially for the color challenged among us, like me!).
- On the Advanced screen you can specify the cell size by pixels, change the cell padding, and add a border. We’ll leave the defaults for now. Click Next again.
- On the Position screen you can set the position of the drop down menu in relation to the main button, according to several presets. For now, use the first preset position for both menu and submenu #########. (This is easy to refine later as you will see in a moment.)
- Finally, when everything is as you want it, click Done.
- Clicking anywhere on the blue rectangles and dragging them allows you to specify the exact position of the drop down menu (though not that of the Submenus).
- Also note that clicking on Preview doesn’t show the pop-up behavior. Hit F12 to preview the file in your web browser and try out your drop-down menu!