Scroll To Top

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.

Mega Menu Magic Style GuideFrom PVII: the leader in responsive Dreamweaver tools

Mega Menu Magic is the first auto-responsive mega menu system for Dreamweaver.

The MGM Style Guide

Horizontal Mega Menu Magic (MGM) is engineered to be extremely flexible and easy to integrate into any design. Like all PVII tools, MGM appearance is CSS-driven. Like many of our latest tools, certain key design parameters are controlled by options in the product interface. Let's examine those first.

Interface-Managed Styling Options

The following options are selectable from within the MGM interface:

1. Root Menu Alignment

Aligns the root menu left, centered, or right within your page layout. This option is for the entire menu.

2. Sub-Menu Styling

There are 2 sub-menu styling options: Width and User Definable Custom Class. These options are based on the root menu item and are applied to the associated sub-menu.

a. Width:

Choose Full-Width, 90%, 80%, 60%, 50% or 40%. This option positions your sub-menu bsed upon the alignment chosen for the root menu. That is, if your root menu is centered, then all sub-menus will be centered at their selected width. If your root menu is left aligned, then so will your sub-menus.

b. User Definable Custom Class

You can select from 10 user-definable custom classes for your sub-menu. Your MGM CSS file contains these 10 classes, which are empty by default and ready for you to customize as you see fit. For example, use this feature to set unique backgrounds or font properties to individual sub-menus. You will find these rules in your MGM CSS file on or near line 320:

.p7MGM-01 .mgm-mega-menu.custom-01 {}
.p7MGM-01 .mgm-mega-menu.custom-02 {}
.p7MGM-01 .mgm-mega-menu.custom-03 {}
.p7MGM-01 .mgm-mega-menu.custom-04 {}
.p7MGM-01 .mgm-mega-menu.custom-05 {}
.p7MGM-01 .mgm-mega-menu.custom-06 {}
.p7MGM-01 .mgm-mega-menu.custom-07 {}
.p7MGM-01 .mgm-mega-menu.custom-08 {}
.p7MGM-01 .mgm-mega-menu.custom-09 {}
.p7MGM-01 .mgm-mega-menu.custom-10 {}

The selector names are prefixed with the class associated with your chosen style theme: .p7MGM-01, .p7MGM-02, .p7MGM-03, or .p7MGM-04.

3. Sub-Menu Content

Layout

Each root menu item can have as many sub-menu rows as you want and each sub-menu row can be configured with various selectable column layouts. The one exception is the Classic Drop Down choice. The classic drop down creates a single-row sub-menu that is set to a minimum width of 240 pixels and positioned to the left edge of its root trigger item. If you choose a classic drop down any value you may have selected in the Sub-Menu Styling Width option will be ignored.

By default, all multiple column structures have vertical borders between columns. If you wish to not have a border, simply remove the col-sep class from the relevant row DIV. A row DIV looks like this:

<div class="p7mgm-row mgm-col-50-50 col-sep">

Remove the border-left class so it looks like this:

<div class="p7mgm-row mgm-col-50-50">

You can also add horizontal borders between rows. To do so, edit the row DIV to include one of the following additional classes: row-sep-bottom, row-sep-top, row-sep-both. For example, to add a bottom border to your row, add the row-sep-bottom class:

<div class="p7mgm-row mgm-col-50-50 col-sep row-sep-bottom">

4. Curves, Shadows and Transparency

At the bottom of the interface you will find 4 check boxes:

a. Rounded Corners

CSS Border radii will be assigned to elements where they logically make sense. To edit any of the rounded corner styles, simply look in your MGM CSS file for styles beginning with .p7MGM-0X.rounded (where X is the number corresponding to your style theme).

b. Shadows

CSS box-shadows will be assigned to elements where they logically make sense. To edit any of the relevant styles, simply look in your MGM CSS file for styles beginning with .p7MGM-0X.shadows (where X is the number corresponding to your style theme).

c. Sub-Menu Transparency

Select this option if you would like your sub-menus to be semi-transparent. To edit the relevant style, simply look in your MGM CSS file for the .p7MGM-0X.transparent .mgm-mega-menu (where X is the number corresponding to your style theme). The transparency is assigned as the alpha value in an RGBA background. As an example, for theme 01, the declarations are:

background-color: #FFF;
background: linear-gradient(180deg, rgba(255,255,255,1), rgba(255,255,255,.65));

The first declaration is a fallback for old browsers. The second declaration sets a linear gradient ramping from full white at the top (to tie into the trigger link) to .65 (65%) opaque white at the bottom. To increase or decrease transparency change the decimal value at the end of the bottom color.

d. Root Menu No Background

This option removes the background color and effects from your top-level menu. Select this option if you would like your menu to tie into an existing menu container that already has a background color or image set.

5. The MGM CSS Files

Each MGM style theme has its own related CSS file. For the purposes of this document we will analyze the theme 01 style sheet (p7MGM-01.css). We will explore only those rules that you will be likely to edit as you customize your menu.

The Root Menu Rule: Fonts & Background

Font (typeface) atrributes are assigned for the entire menu on the root menu CSS rule:

.p7MGM-01 {
position: relative;
line-height: 1;
font-family: "Arial Narrow", Arial, sans-serif;
font-stretch: condensed;
font-size: 17px;

-webkit-transform-style: preserve-3d;
background-image: linear-gradient(180deg, #7BA4C1, #5083A9);
background-color: #7BA4C1;

}

Arial Narrow gives a crisp and pleasing effect (at least to us), but you can change the font-family to whatever you like. If you do change it you can go ahead and delete the font-stretch property.

Background-image is set to a nice blue CSS3 gradient ramping from top to bottom. When you edit the gradient try to do it manually as Dreamweaver will try very hard to corrupt the syntax. Background-color is set as a fallback for old browsers that do not support CSS linear gradients.

Do not edit or remove any of the properties not displayed above in bold.

Root Link Colors and Attributes

The following rule governs the top-level menu link attributes.

.p7MGM-01 a.mgm-root-item {
display: block;
padding: 12px 18px;
color: #000;
text-decoration: none;
font-size: 1em;
background-repeat: no-repeat;
background-position: left center;
border: 1px solid;
border-color: rgba(0,0,0,.5);
border-bottom: none;
transition: background-color linear .35s, border-color linear .35s;
box-shadow: inset 0px 12px 4px rgba(255,255,255,.25);
}

Padding determines the effective height and width of your root menu items. The first value sets both top and bottom padding. Change the value to change link height. The second value sets both left and right. We recommend 18px to ensure sufficient space for the arrows when your menu item has an associated sub-menu. Color sets the text color.

Font-size is set to 1em, which relates to the 17px size assigned on the root menu rule. In most cases you would not need to edit this property. Advanced CSS authors might find its presence useful in certain situations.

Border-color is set to 50% transparent black using RGBA. Old browsers will render a fully opaque black border.

Transition is used to stage an animation effect when the link is hovered over. The animation is assigned to the background-color and border-color properties (separated by a comma). Both are set to a linear animation for a duration of .35 seconds.

Note: Border-color is not changed on hover (see rule below) but is provided in case you decide to add a border-color to the hover rule as it would make for a nice effect.

Box-shadow is set inside the link box to create a glassy effect.

Do not edit or remove any of the properties not displayed above in bold.

 

The following rule governs top-level menu link attributes when the item is hovered over or when its associated sub-menu is open.

.p7MGM-01 a.mgm-root-item:hover, .p7MGM-01 a.mgm-root-item.open {
color: #000;
background-color: #FFF;
}

The declared properties should be self-explanatory.

Current Marked Links

The following rule governs the current marked links:

.p7MGM-01 a.current_mark {
font-weight: bold;
}

This governs links in the root menu and the sub-menus that match the current page address. If you would like to have unique styling for current marked links in the sub-menus then add this rule to your style sheet and add whatever attributes you want:

.p7MGM-01 .mgm-mega-menu a.current_mark {
font-weight: bold;
color: #FF0;
}

Sub-Menu Container

The following rule applies to the sub-menu container for all sub-menus in your menu:

.mgm-mega-menu {
background-color: #FFF;
color: #000;

position: absolute;
top: 100%;
left: 0px;
border: 1px solid;
border-color: rgba(0,0,0,.5);

border-top: none;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

Here you can set background, text color and border attributes for your sub-menus. Do not edit or remove any of the properties not displayed above in bold.

Sub-Menu Content

In this section of the style sheet you can set attributes for content padding and font-size, as well as unique styling for paragraphs, links inside paragraphs, and headings.

.p7MGM-01 .p7mgm-ColContent {
padding: 10px 20px;
font-size: 90%;
}
.p7MGM-01 .p7mgm-ColContent p {
line-height: 1.5;
}
.p7MGM-01 .p7mgm-ColContent p a {
color: #000;
}
.p7MGM-01 .p7mgm-ColContent p a:hover {
color: #06C;
}
.p7MGM-01 .p7mgm-ColContent h1,
.p7MGM-01 .p7mgm-ColContent h2,
.p7MGM-01 .p7mgm-ColContent h3,
.p7MGM-01 .p7mgm-ColContent h4
{
margin-bottom: 0px;
font-weight: normal;
font-size: 1.5em;
}
.p7MGM-01 .p7mgm-ColContent h2 {
font-size: 1.35em;
}
.p7MGM-01 .p7mgm-ColContent h3 {
font-size: 1.25em;
}
.p7MGM-01 .p7mgm-ColContent h4 {
font-size: 1.1em;
}

The above rules should be self-explanatory.

2 special style classes are included: megalist and simple-menu. These classes can be used for list menus inside your sub-menus.

The megalist rules govern the menu placed by default inside a sub-menu when you select the Classic Drop-Down Menu layout configuration. You can also assign the megalist attributes to any list menu you create yourself by assigning the megalist class to your list's UL tag:

<ul class="megalist">

The megalist colors and styling are designed to match your root menu items.

The megalist rules:

.p7MGM-01 .mgm-mega-menu ul.megalist {
display: block;
padding: 0px;
margin: 10px 0px;
}
.p7MGM-01 .mgm-mega-menu ul.megalist.iblock {
display: inline-block;
}
.p7MGM-01 .mgm-mega-menu ul.megalist li {
list-style-type: none;
border: 1px solid #000;
border-color: rgba(0,0,0,.5);
margin-bottom: 8px;
background-color: #FFF;
display: block;
}
.p7MGM-01 .mgm-mega-menu ul.megalist a {
display: block;
padding: 10px;
color: #000;
text-decoration: none;
}
.p7MGM-01 .mgm-mega-menu ul.megalist a:hover {
background-color: #7BA4C1;
color: #FFF;
}

Simple Menu List

The simple-menu rules provide a plainer menu list look.

.p7MGM-01 .mgm-mega-menu ul.simple-menu {
margin: 10px 0px;
padding: 0px;
}
.p7MGM-01 .mgm-mega-menu ul.simple-menu li {
list-style-type: none;
line-height: 1.5;
}
.p7MGM-01 .mgm-mega-menu ul.simple-menu a {
color: #000;
text-decoration: none;
}
.p7MGM-01 .mgm-mega-menu ul.simple-menu a:hover {
text-decoration: underline;
}

Smartphone Menu Media Query

The following Media Query targets smartphones and narrow windows. The rules inside the query determine how the menu looks when it is reconfigered into a vertical accordion-type menu on small devices or in very narrow browser windows. The query begins with this code:

@media only screen and (min-width: 0px) and (max-width: 700px) {

Inside the query are CSS rules:

@media only screen and (min-width: 0px) and (max-width: 700px) {
.rules {go: here;}
}

In the vast majority of cases, will not be needing to edit the rules inside the query.

 

Editing and determining RGBA colors

The following procedures will enable you to convert HEX colors to RGBA in Dreamweaver CS5 and under. Dreamweaver CS5.5 and up have native support for RGBA built in.

RGBA stands for Red-Green-Blue-Alpha. Each value is separated by a comma. The alpha value allows you to set a transparency level for the element being colored—be it a background color, a text color, or a border color. White (255, 255, 255) and black (0, 0, 0) are easy. Dreamweaver can help you to determine the RGB values using its standard color picker tool.

In your CSS Styles panel, select the rule you want to edit. Start by assigning a Hex color. Let's say #6C6. Open the color picker. Then click the System Color Picker icon:

The System Color Picker will open:

Your RGB numbers are listed as the Red, Green, Blue values: 102, 204, 102. So change your color value to:

rgba(102,204,102,1);

Remember, the "1" at the end is the alpha value and means your color is fully opaque (no transparency). To set transparency, choose a decimal value between 1 and 0. For example, to set 50% transparency, your values would be:

rgba(102,204,102,.5);