DD Mega Menu
July 27th, 11': Added ability to activate menu via "click" of the mouse, on top of the default "mouseover". Only .js file changed.
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:
- Each mega menu is simply defined inline on the page as a DIV container, making customization of its contents a breeze.
- Supports nested mega menus, so one mega menu can contain links that in turn trigger another mega menu to drop down.
- Each mega menu can be associated with regular links on the page or fancy menu bars.
- Specify whether a mega menu should drop down to the left of the anchor (the default is to the right). This is useful if the menu is close to the right edge of the browser window.
- Customizable slide in animation- choose from 4 different variations, including bouncing in.
- Ability to specify a delay before each menu and its sub menus disappear when the mouse rolls out of them.
- Works in iPhone/ Android mobile browsers as well.
Mega cool we say!
Demos (first 2 illustrate adding DD Mega Menu to menu bars, the last on a regular link):
Example 1
Example 2
Example 3
JavaScript Kit (activated via click)Step 1: This script uses three external files, including an image. Download them below (right click, and select "Save As"):
- ddmegamenu.js
- ddmegamenu.css
- 3 sample images used: (down arrow)
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.
Set Up Information
Setting up DD Mega Menu is a straightforward three step process:
- First, define the menu bar or anchor link that should show a mega menu(s) onmouseover
- Define the mega menu DIV itself
- Call
ddmegamenu.docinit()
to tie the two together
1) Define the menu bar or anchor container that should show a mega menu(s)
The first thing to do is to define the anchor container that contains the anchor links to display a mega menu onmouseover, whether it's a menu bar that contains numerous anchor links, or a single link itself. Give this anchor element a unique ID attribute:
<div id="solidmenu">
<ul>
<li><a href="#" rel="megamenu1">Home</a></li>
<li><a href="#">Tools</a></li>
<li><a href="#" rel="megamenu2">About</a></li>
</ul>
</div>
OR simply:
<a id="moreresources" href="#" rel="megamenu1">More Resources</a>
As you can see, give the container that houses your anchor link(s) a unique
ID attribute, then for each individual anchor link that should actually trigger
a mega menu, assign it a rel
attribute. If you want a mega menu to
appear left of the anchor link instead of the default right, use the syntax rel="megamenu1[left]"
instead. The value "megamenu1
" inside the rel
attribute should point to the ID of the associated mega menu DIV, which I'll
talk about next.
2) Define the mega menu DIV itself
The next step is to define the mega menu DIV for which each anchor link
in the first step above is refers to. This should be a DIV with an ID
attribute set to the same value as that referenced by the rel
attribute of its corresponding anchor link, for example:
<div id="megamenu1"
class="solidblockmenu">
mega menu contents here...
mega menu contents here...
mega menu contents here...
</div>
This mega menu will be shown when the user mouses over the anchor link above
carrying the attribute rel="megamenu1"
. Note that I've also given
it a CSS class to style it, such as to set the menu's visibility initially to "hidden
"
so it's hidden from viewers. Each mega menu should only be assigned to one
anchor link, not more than 1.
Creating nested mega menus
Inside a mega menu, you can embed new anchor links that in turn display
another mega menu onmouseover, or nested mega menus. The process is exactly the
same as you've already seen, which is to first define a link inside the mega
menu with a rel attribute pointing to the ID of the "sub" mega menu, then define
the "sub" mega menu DIV itself. The following adds an anchor link inside the
mega menu "megamenu1
" above so another mega menu appears inside it
when the mouse rolls over a link:
<div id="megamenu1"
class="solidblockmenu">
mega menu contents here...
mega menu contents here...
mega menu contents here...
<a href="#" rel="megamenu2">Mouse over me</a>
</div>
<div id="megamenu2"
class="solidblockmenu">
2nd
mega menu contents here...
2nd
mega menu contents here...
</div>
Here we have "megamenu1
" containing an anchor link with a
rel
attribute, which tells the script that this link is an anchor link.
Its rel
attribute points to the mega menu "megamenu2
",
completing the association. One important thing to note is that just because "megamenu2
"
is technically a sub mega menu shown only inside "megamenu1
", its
markup is still defined at the document root (BODY) level, same as all of your
other mega menus markup.
3) Call ddmegamenu.docinit()
to tie the two together
With the two components that make up a mega menu in place, what's left is to call the script to tie the two together, and show a mega menu when the mouse rolls over anchor links inside the anchor container! The syntax for this function is:
ddmegamenu.docinit({
//settings here
})
Where settings is a list of settings, each separated by a comma. This function should be called in the HEAD section of your page, for example:
<script>
ddmegamenu.docinit({
menuid:"solidmenu",
easing:"easeInOutCirc",
dur: 200 //<--no comma after last setting!
})
</script>
The only required setting is "menuid
", or the ID of your anchor
container (not mega menu container). The following describes each of the
settings in more detail:
ddmegamenu.docinit() settings
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 " |
trigger |
How the Menu should be triggered. The default
is "mouseover ", or when the mouse rolls over the anchor
link. Supported values are: "mouseover " and "click ". |
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. |
Styling DD Mega Menu
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;
}
Styling the selected link anchor
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.