Megavator by PVII: Getting Started

Download as pdf or txt
Download as pdf or txt
You are on page 1of 39

Megavator by PVII: Getting Started

Contents
Megavator by PVII: Getting Started ...........................................................................................................................1
Creating a Megavator menu ...................................................................................................................................2
Modifying an Existing Megavator ...........................................................................................................................8
Editing the Megavator Font Styles .........................................................................................................................9
Setting Custom Widths for Panel Headings......................................................................................................... 11
Custom Sub-Menu Widths and Positioning......................................................................................................... 16
Adding and Styling Sub-Menu Panel Content ..................................................................................................... 20
Can you add other PVII widgets inside Megavator panels? ............................................................................ 20
How do I make multiple columns inside Megavator panels?.......................................................................... 20
What about 3 columns? .................................................................................................................................. 25
Making a Vertical Megavator .............................................................................................................................. 26
Custom Positioning Sub-Menu Panels for a Vertical Megavator .................................................................... 36
Support and Contact info ........................................................................................................................................ 38
PVII Knowledge Base ........................................................................................................................................... 38
Newsgroup forum communities ...................................................................................................................... 38
RSS News Feeds ............................................................................................................................................... 39
Before you Contact us ..................................................................................................................................... 39
Snail mail.......................................................................................................................................................... 39
Megavator by PVII: Getting Started 2

Megavator is an add-on for Elevator Panel Magic that can be purchased separately. The following tutorial is
included as a convenience for those of you who have purchased the Megavator add-on. If you'd like more
information, please visit the Megavator Web page or the online Megavator tutorials page.

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 Elevator Panel
Magic interface enables you to add, remove, or re-order panels as often as you need to and to change style
themes and options.

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 work page for you with banner, 2 floated columns, and footer.

2 Megavator by PVII: Getting Started | © 2009 Project Seven Development


Megavator by PVII: Getting Started 3

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.

3 Megavator by PVII: Getting Started | © 2009 Project Seven Development


Megavator by PVII: Getting Started 4

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.

4 Megavator by PVII: Getting Started | © 2009 Project Seven Development


Megavator by PVII: Getting Started 5

-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.

5 Megavator by PVII: Getting Started | © 2009 Project Seven Development


Megavator by PVII: Getting Started 6

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

6 Megavator by PVII: Getting Started | © 2009 Project Seven Development


Megavator by PVII: Getting Started 7

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.

7 Megavator by PVII: Getting Started | © 2009 Project Seven Development


Megavator by PVII: Getting Started 8

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.

8 Megavator by PVII: Getting Started | © 2009 Project Seven Development


Megavator by PVII: Getting Started 9

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

9 Megavator by PVII: Getting Started | © 2009 Project Seven Development


Megavator by PVII: Getting Started 10

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.

10 Megavator by PVII: Getting Started | © 2009 Project Seven Development


Megavator by PVII: Getting Started 11

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
Megavator first)

Click the Add button to create 2 new headings:

1. Job Opportunities
2. Press Releases

Click OK

11 Megavator by PVII: Getting Started | © 2009 Project Seven Development


Megavator by PVII: Getting Started 12

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.

12 Megavator by PVII: Getting Started | © 2009 Project Seven Development


Megavator by PVII: Getting Started 13

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.

13 Megavator by PVII: Getting Started | © 2009 Project Seven Development


Megavator by PVII: Getting Started 14

Open your Megavator 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.

14 Megavator by PVII: Getting Started | © 2009 Project Seven Development


Megavator by PVII: Getting Started 15

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, Megavator 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
right now.

15 Megavator by PVII: Getting Started | © 2009 Project Seven Development


Megavator by PVII: Getting Started 16

Custom Sub-Menu Widths and Positioning

Here is the markup for the first sub-menu panel (with text content truncated):

<div id="p7EPMc1_1" class="p7epm_content pan1">


<p>Lorem ipsum dolor...</p>
</div>

Each panel is assigned a custom class. p7epm_content pan followed by a second class that corresponds to the
order of your panels—so p7epm_content pan1 is the first sub-menu, p7epm_content pan2 is the second, and
so on.

We've included these classes (for 5 sub-menus) in each of the Megavator style sheets:

.p7EPM53 .p7epm_content.pan1 {}
.p7EPM53 .p7epm_content.pan2 {}
.p7EPM53 .p7epm_content.pan3 {}
.p7EPM53 .p7epm_content.pan4 {}
.p7EPM53 .p7epm_content.pan5 {}

Tip: Should you have more than 5 sub-menus, simply add .p7EPM53 .p7epm_content.pan6 {}, and so on to your style sheet.

Let's add a custom width to the first sub-menu.

In your CSS Styles panel, select .p7EPM53 .p7epm_content.pan1

Click the Add Property link and select width


In the value column enter 300 and px for the unit of measure

16 Megavator by PVII: Getting Started | © 2009 Project Seven Development


Megavator by PVII: Getting Started 17

Now let's add a custom width to the first sub-menu and let's also position it so that it starts at the left edge of its
heading.

Set the width to 300px

As for positioning, we'll use the margin-left property and set it to 113px.

We arrived at 113px because the first heading (#p7EPMtrg1_1) was set to 112px and it has a 1px right border,
making the box model width 113.

Let's quickly finish up. Select each of the 3 remaining sub-menu panel classes in your CSS Styles panel and assign
a width and a margin-left as follows:

.p7EPM53 .p7epm_content.pan3 {
width: 300px;
margin-left: 226px;
}
.p7EPM53 .p7epm_content.pan4 {
width: 300px;
margin-left: 406px;
}
.p7EPM53 .p7epm_content.pan5 {
width: 300px;
margin-left: 586px;
}

17 Megavator by PVII: Getting Started | © 2009 Project Seven Development


Megavator by PVII: Getting Started 18

All sub-menu panels are lining up perfectly, but we have a slight problem with the last 2. Sub-menu panel 4 ends
several pixels short of the layout and Sub-menu panel 5 goes well beyond the layout boundary.

We'll fix this by increasing the width of Sub-menu panel 4 and decreasing the margin-left value for Sub-menu
panel 5.

For sub-menu panel 4, change the width to 306px

.p7EPM53 .p7epm_content.pan4 {
width: 306px;
margin-left: 406px;
}

For sub-menu panel 5, change the width to 306px and the margin-left value to 406px

.p7EPM53 .p7epm_content.pan5 {
width: 306px;
margin-left: 406px;
}

18 Megavator by PVII: Getting Started | © 2009 Project Seven Development


Megavator by PVII: Getting Started 19

That's better.

Preview in a browser.

Looking very good.

19 Megavator by PVII: Getting Started | © 2009 Project Seven Development


Megavator by PVII: Getting Started 20

Adding and Styling Sub-Menu Panel Content

When you create a Megavator menu your sub-menu panels are populated with boilerplate text that you replace
with your own content. You can do this in Dreamweaver Design View just as you would enter content on any
other part of your page. There are no restrictions on what can be placed inside a panel. Here are some
examples of what you can add:

 Paragraphs of text
 Images
 Ordered or unordered Lists
 Hyperlinks
 Forms
 Tables
 DIVS

Simply delete the boilerplate text and add whatever you want!

Can you add other PVII widgets inside Megavator panels?

Yes you can. You can add Accordions, Tab Panels, Scrollers, Tree Menus, Menu Bar Magic menus, Slide Shows,
Image Galleries, or Lightshows.

Note: The only thing you cannot add is a popup or flyout menu because the Megavator panels have overflow hidden as part of the
animation sequence and any flyout that flies out past the edge of a panel will be truncated. You can, however, add a single level
PMM or PMM2 menu.

How do I make multiple columns inside Megavator panels?

You can use CSS or tables to make multiple columns.

If you are not proficient with CSS, the easiest way to achieve multiple columns in a Megavator sub-
menu panel would be to insert a multi-column table.

If you are a CSS whiz feel free to cook up your own column recipe—there are no limits.

20 Megavator by PVII: Getting Started | © 2009 Project Seven Development


Megavator by PVII: Getting Started 21

We've included some special style rules that you can use to build multiple column structures inside your panels.
Let's go through the steps using the Megavator menu you created earlier.

Open work01.htm

Place your cursor inside the first sub-menu panel and then switch to Code View.

Select the paragraph inside the p7EPMc1_1 DIV

Delete it

Your cursor should wind up on a blank line between the opening <div id="p7EPMc1_1" class="p7epm_content
pan1"> tag and its closing </div> tag as pictured below.

Leave your cursor in its position between the opening and closing DIV tags and enter the following code:

<div class="panelColumnWrapper">
<div class="panelColumn_50">
Left Column
</div>
<div class="panelColumn_50 rightcolumn">
Right Column
</div>
</div>

21 Megavator by PVII: Getting Started | © 2009 Project Seven Development


Megavator by PVII: Getting Started 22

Switch back to Design View

You can now add paragraphs or links inside your columns. You can also add content above or below the
panelColumnWrapper DIV, like so:

<div id="p7EPMc1_1" class="p7epm_content pan1">


<h3>Heading above the columns</h3>
<div class="panelColumnWrapper">
<div class="panelColumn_50">
Left Column
</div>
<div class="panelColumn_50 rightcolumn">
Right Column
</div>
</div>
<p>Paragraph below the columns</p>
</div>

Can I place styled links in my columns?

We've provide some style rules to make it easy for you to add nice CSS links to your columns. First, we'll need to
make a list of links in each column. We'll provide you with the finished code as a starting point.

Place your cursor inside the text "Left Column" and switch to Code View

22 Megavator by PVII: Getting Started | © 2009 Project Seven Development


Megavator by PVII: Getting Started 23

Delete the text "Left Column" and, in its place, enter the following unordered list code:

<ul class="linklist">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>

Now replace the text "Right Column" with the same unordered list code. Your entire p7epm_content pan1 DIV
code should now look like this:

<div id="p7EPMc1_1" class="p7epm_content pan1">


<div class="panelColumnWrapper">
<div class="panelColumn_50">
<ul class="linklist">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
</div>
<div class="panelColumn_50 rightcolumn">
<ul class="linklist">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
</div>
</div>
</div>

23 Megavator by PVII: Getting Started | © 2009 Project Seven Development


Megavator by PVII: Getting Started 24

Save your file and preview in a browser.

Table Users: If you are using a table for your columns and want to use our link styles simply assign the class linklist to the TD tags
that contain your links.

24 Megavator by PVII: Getting Started | © 2009 Project Seven Development


Megavator by PVII: Getting Started 25

What about 3 columns?

For a 3 column structure you would use this code inside your panelColumnWrapper DIV:

<div class="panelColumnWrapper">
<div class="panelColumn_33">
<ul class="linklist">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
</div>
<div class="panelColumn_33">
<ul class="linklist">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
</div>
<div class="panelColumn_33 rightcolumn">
<ul class="linklist">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
</div>
</div>

25 Megavator by PVII: Getting Started | © 2009 Project Seven Development


Megavator by PVII: Getting Started 26

Making a Vertical Megavator

There may be times when a project calls a Megavator menu with vertically stacked panel headings and sub-
menu panels that align to the right. We've made Megavator flexible enough to allow this type of modification.
Let's go through the steps.

Open work02.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>

We'll establish an insertion point at the top of the rightcolumn DIV, but before the beginning of the column-
content DIV.

26 Megavator by PVII: Getting Started | © 2009 Project Seven Development


Megavator by PVII: Getting Started 27

Place your cursor inside the right column.

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

The column-content DIV will highlight.

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

Your insertion point is now established just above the column-content DIV, but still inside the rightcolumn
DIV.

27 Megavator by PVII: Getting Started | © 2009 Project Seven Development


Megavator by PVII: Getting Started 28

-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.

Create 3 Panel Headings as follows:

 Products
 Services
 Company Info

28 Megavator by PVII: Getting Started | © 2009 Project Seven Development


Megavator by PVII: Getting Started 29

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

Uncheck the Open Content Panel 1 on Page Load box

Change the Animation Duration to 150

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

Select Style Theme select 54-Megavator Basic

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

29 Megavator by PVII: Getting Started | © 2009 Project Seven Development


Megavator by PVII: Getting Started 30

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

Now we'll move the panel headings into the left column.

Place your cursor inside the first panel heading text "Products".

On your Tag Selector bar click <div.p7epm_trigs#p7EPMt_1>

The panel heading DIV will highlight

Choose Edit > Cut

Now place your cursor inside the left column text and click <div.column-content> on your Tag Selector bar

30 Megavator by PVII: Getting Started | © 2009 Project Seven Development


Megavator by PVII: Getting Started 31

The left column content will highlight

Press your keyboard's left arrow key once to position your cursor between the leftcolumn and the column-
content DIVs

Choose Edit > Paste

The panel headings are now in the left column. They are no longer styled (we'll take care of that in a moment),
but if you preview your page you'll see that the Megavator is working just fine.

To get our headings styled we will simply wrap the panel heading DIV inside another DIV and assign it the
Megavator basic style theme class.

31 Megavator by PVII: Getting Started | © 2009 Project Seven Development


Megavator by PVII: Getting Started 32

Place your cursor inside the panel heading text (it doesn't matter where) and click
<div.p7epm_trigs#p7EPMt_1> on your Tag Selector bar

Switch to Code View

Click the Wrap Tag icon (yellow pencil)

Type div inside the angle brackets and press Enter (Return) twice to create the new DIV

Your code will now look like this:

<div>
<div id="p7EPMt_1" class="p7epm_trigs">
<ul>
<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 Info</a></li>
</ul>
<div class="p7epm_ie5clear">&nbsp;</div>
</div>
</div>

32 Megavator by PVII: Getting Started | © 2009 Project Seven Development


Megavator by PVII: Getting Started 33

Assign the p7EPM54 class to the new DIV so it looks like this:

<div class="p7EPM54">
<div id="p7EPMt_1" class="p7epm_trigs">
<ul>
<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 Info</a></li>
</ul>
<div class="p7epm_ie5clear">&nbsp;</div>
</div>
</div>

Switch to Design View

We have style, but our headings are displayed horizontally. Let's make a quick edit to the Megavator syle sheet
to fix that.

Open your CSS Styles panel

33 Megavator by PVII: Getting Started | © 2009 Project Seven Development


Megavator by PVII: Getting Started 34

Locate and select the .p7EPM54 .p7epm_trigs rule

Click the Add Property link and select padding from the list

Enter 3px for the padding value

select the .p7EPM54 .p7epm_trigs li rule

Set the float value to none

Change the margin value to 0

Change the padding values to 0 0 3px 0

34 Megavator by PVII: Getting Started | © 2009 Project Seven Development


Megavator by PVII: Getting Started 35

Your panel headings should now look like this

Preview the page in a browser

You have a working vertical Megavator.

Of course, depending on your sub-menu content you might want to position and size your panels. Let's tackle
that task next.

35 Megavator by PVII: Getting Started | © 2009 Project Seven Development


Megavator by PVII: Getting Started 36

Custom Positioning Sub-Menu Panels for a Vertical Megavator

To position and size the sub-menu panels we'll create a special CSS rule for the outer DIVs that enclose each of
the sub-menu panels. These DIVs have an ID that begins with p7EPMw1, followed by an underscore and a
number that represents their order inside the Megavator. The outer wrapper for the first sub-menu panel,
therefore, would be p7EPMw1_1. The second would be p7EPMw1_2, and so on.

The Megavator we've built has 3 sub-menu panels, so we'll need to create 3 CSS rules.

Open your Megavator 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:

#p7EPMw1_1 {
width: 400px;
top: 3px;
left: -4px;
}
#p7EPMw1_2 {
width: 400px;
top: 12px;
left: -4px;
}
#p7EPMw1_3 {
width: 400px;
top: 50px;
left: -4px;
}

Save and close the style sheet file.

36 Megavator by PVII: Getting Started | © 2009 Project Seven Development


Megavator by PVII: Getting Started 37

Preview in a browser.

As you can see, you can manipulate the width, the top position, and the left position to get your sub-menus just
the way you want them. Depending on content, each can have a different width, as well as different offsets and
overlaps.

37 Megavator by PVII: Getting Started | © 2009 Project Seven Development


Support and Contact info 38

Support and Contact info

PVII quality does not end with your purchase - it continues with the best customer support in the business.

PVII Knowledge Base

The PVII Knowledge Base is an online PVII application allowing you to access dozens of Tech Notes, tips, and
techniques relating to our products, as well as to general web development issues..

Open the Knowledge Base | View the 10 Most Recent Additions

Newsgroup forum communities

The Project VII Newsgroup community is our primary support vehicle and is available 24 hours a day. Choose
from the following newsgroups:

1. The PVII Webdev Newsgroup


2. The PVII Dreamweaver Newsgroup
3. The PVII Fireworks Newsgroup
4. The PVII CSS Newsgroup

Note: If you have trouble linking directly to news servers, use your default newsreader's program options to set up a new account
and point it at the following server:

forums.projectseven.com

Setting up a new newsgroup account in Outlook Express

Setting up a new newsgroup account in Mozilla Thunderbird

Setting up a new newsgroup account in Entourage

If you have another newsgroup-capable program that you are using, please see its documentation to learn how
to add a new newsgroup account.

Note: PVII newsgroups are private and have nothing to do with usenet feeds that may be provided by your ISP. That is, you will
not find our newsgroups in a list of newsgroups distributed by your internet service provider. You must set up our news server as
a new account.

38 Support and Contact info | © 2009 Project Seven Development


Support and Contact info 39

RSS News Feeds

Keep up with the latest news the minute it's released by subscribing to our RSS news feed. If you are not sure
how to subscribe, please check this page:

PVII RSS Info

Before you Contact us

Before making a support inquiry, please be certain to have read the documentation that came with your
product. Please include your Dreamweaver version, as well as your computer operating system type in all
support correspondence.

E-Mail:
[email protected]

Phones:
330-650-3675
336-374-4611

Phone hours are 9:00am - 5:00pm Eastern Time U.S.

Snail mail

Project Seven Development


339 Cristi Lane
Dobson, NC 27017

39 Support and Contact info | © 2009 Project Seven Development

You might also like