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:
- work01.htm
- work02.htm
- 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 in the Common Section of Dreamweaver's Insert Bar (or 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:
- Job Opportunities
- 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