Enter a query to search our site. Note that you can use "*" and "?" as wildcards. Enclosing more than one word in double quotes ("CSS Layout") will search for the exact phrase.

megavator Mega menu Instruction

Customize your Megavator Menus step-by-step

 

Lesson 1: Establish an insertion point,
create a Megavator Menu, modify the menu,
edit font styles

Megavator utilizes the core Elevator Panel Magic script engine—in concert with special style themes—to create a fresh new type of Web menu that is usable, accessible, versatile and utterly captivating. Megavator sub-menu panels are designed to be editable in Dreamweaver Design View—enabling you to easily add any type of content you want—including links, paragraphs, lists, tables, images, and even forms. The automated interface enables you to add, remove, or re-order panels as often as you need to and to change style themes and options.

Megavator requires the core Elevator Panel Magic system and works through the Elevator Panel Magic user interface. Please refer to the Elevator Panel Magic user guide for detailed information on the user interface, its options and its settings.

Now let's build and customize a Megavator menu.

Creating a Megavator menu

Before you create your menu you need to establish an insertion point.

We've created a workpage for you with a banner, 2 floated columns, and a footer.

Before you begin, download the workpage. Create a test folder within your defined Dreamweaver Web site, unzip the download, and place the contents of the file inside your test folder. The zip archive contains 3 files:

  1. work01.htm
  2. work02.htm
  3. vrule.gif

Open work01.htm

Here is the page Markup (with text content truncated):

<div id="wrapper">
<div class="banner">Banner / Logo</div>
<div class="leftcolumn">
<div class="column-content">
<h1>Left Column</h1>
<p>Lorem ipsum dolor sit amet...</p>
</div>
</div>
<div class="rightcolumn">
<div class="column-content">
<h1>Right Column</h1>
<p>A re-engineering of your current...</p>
</div>
</div>
<div id="footer">Footer</div>
</div>

There are 2 logical insertion points you might choose: inside the wrapper and either above or below the banner. Let's establish our insertion point above the banner.

Place your cursor inside the Banner.

On your Tag Selector bar, which runs along the bottom of Dreamweaver's window, click <div.banner>

The banner DIV will highlight.

Press your keyboard's left arrow key once. This will position your cursor just above the banner DIV.

Tip: To position your cursor just below the banner you would use your right arrow key instead of the left.

Your insertion point is now established above your banner.

-Click the Elevator Panel Magic icon EPM Icon in the Common Section of Dreamweaver's Insert Bar (or CS4 Insert Panel).

The Insert Bar

CS4 Insert Panel

Dreamweaver CS4 Users: We highly recommend switching to Classic Workspace mode, which allows for a conventional Insert Bar across the top of your Design View window. If you use the new CS4 workspaces, the Insert Bar becomes a vertical panel that violates Windows and OS X interface conventions. In addition to being hard to use, the vertical Insert Bar has no support for mouse wheel scrolling, making it rather unusable. We are hoping Adobe will fix this (and other) UI issues in the next version of Dreamweaver.

Alternatively, you can choose Insert > Studio VII > Elevator Panel Magic by PVII.

The Elevator Panel Magic interface will open.

Add 2 additional Panel Headings and edit the Heading Text to be:

  • Products
  • Services
  • Company Information

To add your Headings, click the Add button above the Panel Headings list

Leave all options as they are (for now) but for Style Theme select 53-Megavator Cayenne

Tip: Clicking the Help button will launch a complete Help file in a browser window, covering all aspects of the interface and its options.

Click OK

Your Megavator is built and your page should look like this:

The sub-menu content panels are visible in your page intentionally so that you can easily enter and edit the content inside.

Preview the page in a browser:

You've got a working Megavator, but the first panel is open and you need to click the panel headings for anything to happen. Let's edit the Megavator to set some additional options.

Modifying an Existing Megavator

Place your cursor inside one of your Megavator's panels.

Choose Modify > Studio VII > Modify Elevator Panel Magic by PVII...

Tip: You can also use the Insert Bar or Insert Panel icon. Since your cursor is inside an existing Megavator, the Elevator system will detect this and automatically open in Modify mode.

The interface will open in Modify mode.

Uncheck the Open Content Panel 1 on Page Load box

Change the Animation Method to 2-Glide-Gradual Stop

Check the Enable Mouse Over Open Action and the Enable Mouse Out Close Action boxes

Click OK

Preview in a browser.

You have a better working Megavator—but you would like the panel heading text to be a little bit smaller... and a little bit taller.

Editing the Megavator Font Styles

Dreamweaver's CSS editing capabilities are fairly robust, but sometimes confusing. If you are not a CSS expert, we recommend that before continuing with this exercise you change Dreamweaver's preferences for CSS editing.

To do so, choose Edit > Preferences

Select The CSS Styles category

Set your options to match the screen above and then Click OK

To change the font size for your panel headings, open the CSS Styles panel in Dreamweaver (Shift + F11)

At the panel's top, make sure the All button is selected

Inside the panel, locate your Megavator style sheet, which will always begin with p7EPM followed by the number of your selected theme (in the case of Cayenne, the number will be 53)

Expand the style sheet (if it is not already) to see its contents and select .p7EPM53 .p7epm_trigs

The lower pane of the CSS Styles panel will display the rule's properties and values

Change the font-size value to .8, leaving em as the unit of measure

Click outside the panel to establish the change.

To make your panel headings taller, select .p7EPM53 .p7epm_trigs a

For the padding property, there are 2 values. This is CSS shorthand. The first value represents both the top and the bottom padding. The second value represents the left and right.

Change the top/bottom value to one higher than 10px to increase the panel heading height or to one less than 10px to decrease the height.

Tip: In CSS shorthand, you can express all 4 sides independently by using 4 values instead of 2. The 4 values represent each side of the box in clockwise order starting with the top—top right bottom left.

Setting Custom Widths for Panel Headings

By default, each panel heading will be as wide as its text + the left/right padding assigned in the panel heading link style rule. There may, however, be times when you want your headings to be specific widths. A case in point would be if you wanted your headings to fill the available width of your layout. Let's do just that—but before we begin, we'll add 2 more headings to our Megavator.

Open the Elevator Panel Magic interface in Modify mode (remember to insert your cursor inside the Magavator first)

Click the Add button to create 2 new headings:

  1. Job Opportunities
  2. Press Releases

Click OK

The layout width is 752 pixels and we have 5 headings. We'll assign a width to each of the headings to fill up the layout.

The Megavator system automatically assigns an ID to each panel heading link. This is what the code for your Megavator panel headings looks like:

<li class="t1"><a href="#p7EPMc1_1" id="p7EPMtrg1_1">Products</a></li>
<li class="t2"><a href="#p7EPMc1_2" id="p7EPMtrg1_2">Services</a></li>
<li class="t3"><a href="#p7EPMc1_3" id="p7EPMtrg1_3">Company Information</a></li>
<li class="t4"><a href="#p7EPMc1_4" id="p7EPMtrg1_4">Job Opportunities</a></li>
<li class="t5"><a href="#p7EPMc1_5" id="p7EPMtrg1_5">Press Releases</a></li>

The ID begins with p7EPMtrg1. The number 1 at the end indicates that this is the first widget on your page. If you had a second Megavator somewhere else on your page, the ID would begin with p7EPMtrg2.

The ID ends with an underscore and another number, which represents the order of your panel headings—so ID p7EPMtrg1_1 is always the first panel heading in the first Megavator on your page.

Tip: As you use this technique on other pages, make sure you use the relevant ID if you have more than one Megavator on your page.

CSS has what's called a box model and your Megavator links are CSS boxes. The width of a CSS box encompasses the element's assigned width + padding + borders. So before we set widths for each of the panel headings we will remove the left/right padding by setting the CSS value to zero.

In your CSS Styles panel, select .p7EPM53 .p7epm_trigs a

Set the second padding value to 0 to zero out your left and right padding.

Now we'll also center the heading text.

Click the Add Property link and select text-align

In the value column select center

Now let's set our widths.

Open your Magavator style sheet. In this case p7EPM53.css, which you will find inside the p7epm folder that was created when you built your menu.

Make a new line at the bottom of the file and add these style rules:

#p7EPMtrg1_1 {
width: 112px;
}
#p7EPMtrg1_2 {
width: 112px;
}
#p7EPMtrg1_3 {
width: 180px;
}
#p7EPMtrg1_4 {
width: 180px;
}
#p7EPMtrg1_5 {
width: 164px;
}

Save and close the style sheet file.

We've done the math for you. The sum of the widths is 748. Since each heading link has a right border, the box model width is actually 748 + 5 = 753, which is 1 pixel over our layout width of 752. Did we mess up?

No, our custom-sized headings would look better if the last one did not have a right border. So let's remove that border.

In your CSS Styles panel, select #p7EPMtrg1_5

Click the Add Property link and select border-right

In the value column enter 0

Preview your page in a browser.

We have a lovely Megavator whose headings perfectly fill the layout width.

By default, Magavator sub-menu panels each fill the entire layout width. We like this effect, but there will likely be projects or clients that demand custom widths, and even custom positioning for the sub-menus.

Let's do that in Lesson 2

  • Lesson 1: Establish an insertion point, create a Megavator Menu, modify the menu, edit font styles.
  • Lesson 2: Set custom panel heading and sub-panel widths, then position the sub-panels.
  • Lesson 3: Adding and Styling Sub-Menu Panel Content.
  • Lesson 4: Making a Vertical Megavator.