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 3: Adding and Styling Sub-Menu Panel Content

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.

That said, 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:

<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

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>

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:

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

Now let's learn how to create a Megavator with vertical panel headings and sub-panels that fly out beside them in Lesson 4

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