Make your own free website on Tripod.com
Submit FAQs Awards Usage Terms Contact
Categories
Other Sections
Sweet Ads
Compatibility
  • IE5+: IE 5 and above
  • FF1+: Firefox 1.0+. NS6+ and FF beta are assumed as well.
  • Opr7+: Opera 7 and above.
Bookmark online:
FF1+ IE6+ Opera8+

DD Mega Menu

Author: Dynamic Drive

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

Visit the following main content areas of JavaScript Kit:


Need help with JavaScript? Coding Forums should be your next stop!

Looking for web design inspiration? CSS Drive showcases some of the most attractive, CSS driven sites on the net.


Example 2

Visit the following main content areas of JavaScript Kit:


Need help with JavaScript? Coding Forums should be your next stop!

Looking for web design inspiration? CSS Drive showcases some of the most attractive, CSS driven sites on the net.

Example 3

JavaScript Kit

Visit the following main content areas of JavaScript Kit:


Need help with JavaScript? Coding Forums should be your next stop!

Directions Developer's View

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

Select All

Step 3:  Add the below menu code to the BODY section of your page, which contains two mega menu examples:

Select All

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:

  1. First, define the menu bar or anchor link that should show a mega menu(s) onmouseover
  2. Define the mega menu DIV itself
  3. 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:
  • "easeInOutSine" (first demo above uses this)
  • "easeInOutCirc" (third demo above uses this)
  • "easeInQuad"
  • "easeOutBack" (2nd demo above uses this)

The difference in some of the easing options are subtle, though "easeOutBack" is dramatically different in that it produces a "bounce in" effect.
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.