UPDATE! I'm moving this site to: www.emirplicanic.com.

BeWebmaster

Dreamweaver Behaviors: Adding Actions - Show Pop-Up Menu

Ad

Events, as described in "Dreamweaver Behaviors: Introduction and Events for 4.0 Browsers" article, help trigger the actions which create the interactivity. Macromedia (Adobe) hasn't added any new behaviors to Dreamweaver MX 2004, but as you already may know Dreamweaver let's you add unlimited number of behaviors by using the Extension Manager. You can visit Dreamweaver Exchange, DMXZone, Project Seven or Felix One to download and install more extensions. To lunch the Extension Manager choose Commands->Manage Extensions.

In this article I am going to go over Show Pop-Up Menu. Other actions (behaviors) provided with Dreamweaver are:

  • Open Browser Window
  • Check Browser 
  • Go To URL
  • Jump Menu
  • Jump Menu Go
  • Preload Images
  • Swap Image
  • Swap Image Restore
  • Set Navigation Bar Image
  • Popup Message
  • Set Text of Status Bar
  • Set Text of Layer
  • Set Text of Text Field
  • Set Text of Frame
  • Control Shockwave or Flash
  • Play Sound
  • Check Plug-in
  • Show and Hide Layers
  • Drag Layers
  • Call JavaScript
  • Change Property

Show Pop-Up Menu

The pop-up menu consists of invisible layers that become visible when you move your cursor over a link. This behavior let's you provide lots of navigation options to your users. Thus Show Pop-Up Menu is a Navigation Action.

Here is how you do it:

Select a link you'd like to have a pop-up navigation

Pres Shift + F4 to open Behavior Panel

Select Show Pop-Up Menu from the Add Action (+) menu. Dialog box will open.

Contents Tab

The first tab (Contents) in the dialog window let's you create and arrange menu items. Other tabs control the appearance and placement of menu items.

To add menu item click on the + button in the Contents tab. Type in the item text and link information. You can use the folder icon to select a file in your site you want to link to.

If you are using frames you can open the menu link in a specific frame by choosing that frame name in the Target menu.

To create sub-menu, select a menu item and then click on the Indent button. This makes the selected item the first item of the sub-menu. You can remove the item from the sub-menu by checking Out-dent button.

Appearance Tab

The second tab offers some useful options as well.

Orientation lets you stack menu items horizontally or vertically. Tip: When using horizontal option make sure you are not too close to the right edge of the browser window, because the menu may not be visible.

Font options let you choose a font, change font size, choose alignment and format the font for all  menu items.

Color boxes let you set up state and over state for menu items. These work just link rollover images.

Advanced Tab

The third tab offers some more detailed design options for a pop-up menu.

Cell width, height, padding and spacing act just like in table cells. When setting a cell width it is a good idea to set with to exact pixel number. That way you can stay consistent with the size if you add several pop-up menus to the page. however, remember that Dreamweaver won't let you set width smaller then the space taken by the text in the button.

Text indent lets you add space between the left edge of the menu and text.

Menu delay lets you control the delay between the time you move your mouse off the menu and the time the menu disappears. Why would you want delay? Without any delay, the menu may disappear as soon as you move your mouse from the triggering link. In that case you won't be able to select any menu item. I always set it at 500 ms.

Borders in advanced tab give menu a 3D appearance. If you don't want any 3D effects just turn of Shadow Borders box. The Border color affects the outside border around the entire menu. The Shadow color ads lines along the right and bottom edges of the menu, just inside of the outside border. It also separates menu items. The Highlight color ads a border along top and left edge of the menu.

Position Tab

The fourth tab in the Show Pop-Up Menu dialog box is position. By default the menu is positioned to the right of the triggering link, and 10px below. However, you can change this using Positioning Options and Pixel Location.

Positioning Options offers four presets represented by four buttons.

  • The first button is the default position.
  • The second button places the menu directly below the triggering link.
  • The third button places the menu above the triggering link and the fourth button places the menu to the right of the triggering link.

Pixel Location lets you control where to display the menu. Distance is measured from the top-left corner of the triggering link.

Hide Menu Checkbox is set on by default. It ensures that the menu disappears when you move your mouse off it.

Applying Settings

Once you added your menu contents and are happy with appearance with the menu click OK to create the menu. Dreamweaver creates a file called mm_menu.js in the folder containing the page that has the menu. Don't delete this file. It contains complex JavaScript code required to make the pop-up menu feature work.

Conclusion

As you can see adding pop-up (or ironically drop-down) menu using Dreamweaver is very easy. You don't have to have any JavaScript knowledge to do it and the code created is cross-browser compatible. Let me know if you liked this article and if you would like me to explain other Behaviors. Better yet, let me know which one and I'd be happy to do it.