Home
Menu and Navigation
Multiple Level
Menus
Here
Categories
Other Sections
Sweet Ads
Compatibility
|
![]() |
FF1+ IE6+ Opera8+
DD Mega Menu Author:
Description: DD Mega Menu is the ideal menu script to use when you need a drop down menu system that supports arbitrary sub menu layouts, such as multiple columns of links or even arbitrary HTML. Each drop down menu is simply defined inline on the page as a regular DIV, making it extremely easy to customize its contents whichever way you like. And unlike most other mega menus, this one supports nested levels. Lets go over the mega features of this menu in more detail:
Mega cool we say! Demos (first 2 illustrate adding DD Mega Menu to menu bars, the last on a regular link): Example 1Example 2Example 3JavaScript KitStep 1: This script uses three external files, including an image. Download them below (right click, and select "Save As"):
Step 2: Insert the following code into the <head> section of your page: Step 3: Add the below menu code to the BODY section of your page, which contains two mega menu examples: Well, that's it for installation. Read on for more details on setting up DD Mega Menu.
|
setting/ option | Description |
menuid Required |
Specifies the ID of the menu bar or
individual link that the script should scan its children elements for
looking for links with the rel="megamenuid " attribute (in
the later case, it would simply be the anchor link itself). Any link
found carrying a rel="megamenuid" or rel="megamenuid[left]" attribute is identified as an anchor
link, with the "megamenuid " value being the ID of the mega menu DIV the
anchor should be associated with on the page. |
easing Defaults to "easeInOutSine" |
The type of slide-in easing effect that
should be applied to this instance of Mega Menu. There are four string
values to choose from:
The difference in some of the easing options are subtle, though " |
dur Defaults to 500 (milliseconds) |
Sets the duration of the slide-in effect in milliseconds. Defaults to 500, or 0.5 seconds. |
hidedelay Defaults to 200 (milliseconds) |
Sets the pause in milliseconds after a mouse has moved out of a mega menu before it slides up and disappears. Defaults to 200. |
As you know, DD Mega Menu consists of two parts- the anchor menu or links
that trigger the mega menus, and the mega menu DIVs themselves. The former's
markup and style is completely up for you to decide, while the style for the
mega menus should contain at a minimum select CSS properties such as "position:absolute
"
to absolutely position them on the page. Other than that, you have full rein
over both of their styles. Inside ddmegamenu.css
is where the style of DD Mega Menu is defined by default. The .mega
class
and its child selectors control the default look of the mega menu DIVs:
.mega{
width:300px; /*default width of mega menu*/
padding:10px;
position:absolute;
visibility:hidden;
border:2px solid black;
border-top-width:1px;
background:white;
-webkit-box-shadow: 5px 5px 5px #c8c8c8; /*css 3 shadows*/
-moz-box-shadow: 5px 5px 5px #c8c8c8;
box-shadow: 5px 5px 5px #c8c8c8;
}
As far as the look of the anchor menus/ links, as mentioned, that's
completely up to you to decide. Here is part of the .solidblockmenu
class used to create the black/red menu bar in the first demo at the very
top:
.solidblockmenu{
margin: 0;
padding: 0;
float: left;
font: bold 13px Arial;
width: 100%;
overflow: hidden;
margin-bottom: 1em;
border: 1px solid #625e00;
border-width: 1px 0;
background: black url(blockdefault.gif) center center repeat-x;
}
However you style your anchor menus/links, there is something the script
inexplicitly adds to them, and that is a CSS class of ".selected
"
to the current anchor link the mouse is over. By styling ".selected
",
you can easily style the look of the anchor link that the mouse is currently
over, which includes when the mouse is over the associated mega menu. In the
case of the .solidblockmenu
rules, the below snippet takes
advantage of this fact to give the currently selected anchor link a
background image of red:
.solidblockmenu li a:hover,
.solidblockmenu li a.selected{ /*Selected Tab style*/
color: white;
background: transparent url(blockactive.gif) center center repeat-x;
}
In other words, the key is to target the a.selected
selector
within your menu bar.