Megavator by PVII: Getting Started

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

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

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.

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 {}
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

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;
}
width: 300px;
margin-left: 406px;
}
width: 300px;
margin-left: 586px;
}

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
width: 306px;
margin-left: 406px;
}
For sub-menu panel 5, change the width to 306px and the margin-left value to 406px
width: 306px;
margin-left: 406px;
}

That's better.
Looking very good.

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.

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>

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:

<h3>Heading above the columns</h3>
Left Column
</div>
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

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>
</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:

</ul>
</div>
</ul>
</div>
</div>
</div>

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.

What about 3 columns?
For a 3 column structure you would use this code inside your panelColumnWrapper DIV:
</ul>
</div>
</ul>
</div>
</ul>
</div>
</div>

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">
<h1>Left Column</h1>
<p>Lorem ipsum dolor sit amet...</p>
</div>
</div>
<div class="rightcolumn">
<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.

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.

-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

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

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

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.

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="t3"><a href="#p7EPMc1_3" id="p7EPMtrg1_3">Company Info</a></li>
</ul>
<div class="p7epm_ie5clear"> </div>
</div>
</div>

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="t3"><a href="#p7EPMc1_3" id="p7EPMtrg1_3">Company Info</a></li>
</ul>
<div class="p7epm_ie5clear"> </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

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

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.

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.

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.

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:
support@projectseven.com
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

Megavator by PVII: Getting Started

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Megavator by PVII: Getting Started

Uploaded by

Copyright:

Available Formats

Megavator by PVII: Getting Started

Now let's build and customize a Megavator menu.

Creating a Megavator menu

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

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

Place your cursor inside the Banner.

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

The banner DIV will highlight.

Your insertion point is now established above your banner.

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

The Elevator Panel Magic interface will open.

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

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

Preview the page in a browser:

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

Modifying an Existing Megavator

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

The interface will open in Modify mode.

Uncheck the Open Content Panel 1 on Page Load box

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

Editing the Megavator Font Styles

To do so, choose Edit > Preferences

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

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

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

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

Setting Custom Widths for Panel Headings

Click the Add button to create 2 new headings:

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

<li class="t1"><a href="#p7EPMc1_1" id="p7EPMtrg1_1">Products</a></li>

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

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

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

Save and close the style sheet file.

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

In your CSS Styles panel, select #p7EPMtrg1_5

Preview your page in a browser.

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

Custom Sub-Menu Widths and Positioning

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

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

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

Set the width to 300px

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

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

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

Looking very good.

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

Adding and Styling Sub-Menu Panel Content

Can you add other PVII widgets inside Megavator panels?

How do I make multiple columns inside Megavator panels?

You can use CSS or tables to make multiple columns.

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

Select the paragraph inside the p7EPMc1_1 DIV

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

Switch back to Design View

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