PVII (projectseven.com): CSS tutorials, accessible DHTML popup menu systems, Dreamweaver tutorials, Dreamweaver extensions, CSS Forums, and FAQProjectseven.com: CSS tutorials, accessible DHTML popup menu systems, Dreamweaver tutorials, Dreamweaver extensions, CSS Forums, and FAQ.

Go to the Navigation Bar

{ imagine: the: possibilities;}

Browse and be inspired : Visit the new PVII Live Demo and Product Showcase Viewer.

Get inspired at the Demo Viewer...

simple vii popup menus 2004

This tutorial's objective is to teach you how to make simple popup menus using PVII extensions. To ensure that your focus is on how to use and apply the extensions, we've provided you with a worksheet page - all ready to go with HTML markup, images, and fully commented style sheets set up for you. We've also included an editable Fireworks PNG that you can use to edit the Simple VII images, if you so desire.

Note: The PVII extensions used in this tutorial work in Dreamweaver versions 4.01 through MX 2004. However, because of severe limitations in the Dreamweaver4 rendering engine, Dreamweaver MX or higher is required to complete this tutorial.

Menu Overview: How it works

Simple VII uses the PVII AutoLayers behavior to make hidden submenus visible when you mouse over menu trigger buttons. When you mouse off of a submenu, the PVII AutoHide behavior automatically closes that submenu. It couldn't be simpler.

Take a moment and look at the finished menu you will make:

See the finished Simple VII menu

Download Extensions and Work Files

To complete the online tutorial you'll need to download and install two free extensions and the Simple VII Work Folder zip archive:

  1. Auto Layers
  2. Auto Hide Layers
  3. Simple VII Work Folder

After downloading

  1. Double-click each MXP file to begin the installation
  2. Close and restart Dreamweaver to initialize the extensions
  3. Create a new folder in a defined Dreamweaver site and name it SimpleVII
  4. Unzip the P7Simon.zip Work Folder archive and place its contents in the SimpleVII folder you created in the previous step
  5. Open the file worksheet.htm

Note: the supplied worksheet.htm page contains all of the elements you'll need to bring your Simple VII menu to life. The worksheet also contains an overview of all that is contained. Please take a moment and familiarize yourself with the page before proceeding.

Setting the AutoLayers menu behaviors

The PVII AutoLayers behavior is applied to each of the menu Trigger images so that when you mouse over one, its submenu becomes visible - while hiding any other open submenus. AutoLayers is a very powerful and intelligent extension that goes beyond the capabilities of Dreamweaver's built-in Show-Hide Layers.

Trigger button one

  1. If you haven't done so, open worksheet.htm
  2. Select the first Trigger image (button one)
    Select the <a> tag on the Tag Selector Bar
  3. With the image selected, click the <a> tag on Dreamweaver's Tag Selector bar (along the bottom border of Dreamweaver's window)
  4. Open your Behaviors panel (Window - Behaviors)
  5. Click the plus sign along the panel's top border
  6. Choose Studio VII - Auto Layers by PVII

The AutoLayers UI (user interface) will open.

The AutoLayers UI - Setting the first Submenu

  1. In the Set Layers area, click to select layer "p7simonsubs1"
  2. Click the Show Layer button (the word "Show" will be appended in parentheses to the Layer name)
  3. Click OK

The Behaviors panel will show the event. In all likelihood, Dreamweaver will have set the event to onClick. You'll need to change that to onMouseOver.

The Behaviors Panel - Changing onClick to onMouseOver

  1. Click inside the box that contains onClick and an arrow will appear
  2. Click the arrow to expand the events menu
  3. Choose onMouseOver

Trigger button two

  1. Select the second Trigger image (button two)
  2. With the image selected, click the <a> tag on Dreamweaver's Tag Selector bar (along the bottom border of Dreamweaver's window)
  3. Open your Behaviors panel (Window - Behaviors)
  4. Click the plus sign along the panel's top border
  5. Choose Studio VII - Auto Layers by PVII

The AutoLayers UI will open.

The AutoLayers UI - Setting the second Submenu

  1. In the Set Layers area, click to select layer "p7simonsubs2"
  2. Click the Show Layer button (the word "Show" will be appended in parentheses to the Layer name)
  3. Click OK
  4. Make sure you set the event to onMouseOver

Trigger button three

  1. Select the third Trigger image (button three)
  2. With the image selected, click the <a> tag on Dreamweaver's Tag Selector bar (along the bottom border of Dreamweaver's window)
  3. Open your Behaviors panel (Window - Behaviors)
  4. Click the plus sign along the panel's top border
  5. Choose Studio VII - Auto Layers by PVII

The AutoLayers UI will open.

The AutoLayers UI - Setting the third Submenu

  1. In the Set Layers area, click to select layer "p7simonsubs3"
  2. Click the Show Layer button (the word "Show" will be appended in parentheses to the Layer name)
  3. Click OK
  4. Make sure you set the event to onMouseOver

Trigger button four

The fourth Trigger button has no related submenu. Imagine it as being a link to a page that has no related pages, such as a page containing contact information or a site map. So why are we adding an AutoLayers behavior to it? In the event that a user mouses off the right edge of the previous button, his cursor will encounter this button and AutoLayers is so smart that it will hide any submenus that are open.

  1. Select the fourth Trigger image (no submenu)
  2. With the image selected, click the <a> tag on Dreamweaver's Tag Selector bar (along the bottom border of Dreamweaver's window)
  3. Open your Behaviors panel (Window - Behaviors)
  4. Click the plus sign along the panel's top border
  5. Choose Studio VII - Auto Layers by PVII

The AutoLayers UI will open.

The AutoLayers UI

Make no selections in the UI

  • Click OK

Note: By simply clicking OK, without selecting any Layers, you are telling AutoLayers to hide any Layers it has previously shown.

As you did with the previous AutoLayers events-

  • Set the event to onMouseOver

Preview your menu

Preview your page and note that as you mouse over the Trigger buttons, the appropriate submenu will appear and any other submenu that was previously visible will be hidden - or in the case of the fourth Trigger, no submenu will be shown, but all open menus will be hidden. AutoLayers is doing its magic. However, if you mouse off any of the buttons towards the top of the page, any open submenu will remain open. You'll fix that next.

Assigning AutoLayers to the Logo DIV

Before you apply the next behaviors, make sure Dreamweaver is set to accept events supported by modern browsers. To do so:

  1. Click the plus (+) sign on the Behaviors panel
  2. Choose Show Events For
    Setting supported events
  3. Choose either IE6 or Netscape 6

Modern browsers support JavaScript events on DIV tags. By setting an AutoLayers event on the Logo DIV you can ensure that when a user mouses off the top of a Trigger button, any open submenus will be hidden. To make this work effectively, the p7simon CSS file sets the Logo DIV's width to 100%.

  1. Click the logo image
  2. Click the <div#logo> tag on the Tag Selector bar
    Select the <div> tag on the Tag Selector Bar
  3. Open your Behaviors panel (Window - Behaviors)
  4. Click the plus sign along the panel's top border
  5. Choose Studio VII - Auto Layers by PVII

Note: Dreamweaver's Design View is not a perfect place. When you select the DIV tag, you may see that your submenus become visible and highlighted. There is nothing to worry about - it's just a Dreamweaver visual quirk.

The AutoLayers UI will open.

The AutoLayers UI - Setting the first Submenu

Make no selections in the UI

  • Click OK

Note: By simply clicking OK, without selecting any Layers, you are telling AutoLayers to hide any Layers it has previously shown.

As you did with the previous AutoLayers events-

  1. Set the event to onMouseOver
  2. Preview in your browser

As you operate the menu, move your mouse off of the Trigger button tops and any open submenu will disappear.

Adding the AutoHide Behavior

You've taken care of showing your submenus and you've also addressed hiding them when you move your mouse from one Trigger button to another, or when you mouse off the Triggers towards the top of your page. What's left is to make sure that when you move your mouse off a submenu and onto the page, the submenu hides. PVII AutoHide provides the magic.

  1. Click the <body> tag on your Tag Selector bar
  2. Open your Behaviors panel menu
  3. Choose Studio VII - autoHide Layers by PVII

The AutoHide UI will open

Setting Layers to Auto Hide in the AutoHide UI

There are three submenu Layers. You'll select each one and set it to Auto Hide.

  1. Select layer "p7simonsubs1"
  2. Click the Auto Hide button (as you click the Auto Hide button, the word "Selected" will be appended in parentheses after the layer name)
  3. Select layer "p7simonsubs2"
  4. Click the Auto Hide button
  5. Select layer "p7simonsubs3"
  6. Click the Auto Hide button
  7. Click OK

Make sure the event listed in your Behaviors panel is onLoad

Preview the page and you'll see that each submenu Layer automatically hides when you move your mouse off of it.

Closing Thoughts

You've learned how to use AutoLayers and AutoHide to orchestrate a popup menu. You now know the method. The design possibilities are limited only by your imagination and skill level. Triggers do not need to be hybrid image/CSS-rollovers - you can use traditional Swap Image techniques. Submenus do not have to be CSS-styled text - you can use images in the submenus, if you wish. Of course, if your CSS skill level is advanced, you are not limited to using images for Triggers and your submenu links can be placed in styled lists.

We hope you've enjoyed this tutorial. If you have questions or comments, log on to the PVII Webdev Newsgroup:

Direct Link (for Outlook Express Users)

Server Name: forums.projectseven.com