Download slidedown menu

Download

Licensing

This script is distributed under the LGPL open source license.
Commercial licenses are also available. Some of these licenses also includes personal e-mail support for up to 1 year.

Configuration

Define menu items

The menu is based on an unordered list, so the only thing you have to do is to build this. Look how it is done in the demo for help.

Configure layout

The layout for the main-, and submenu items is specified in the CSS. Look at the comments in the CSS for further information.

Initially show a group of sub menu items

You can automatically expand/show a group of sub menu items. This is done by setting the Javascript variable expandFirstItemAutomatically to the index of the main menu item you want to expand(example:
var expandFirstItemAutomatically=1; to initially expand the first group of sub items.

You may also specify which submenu to expand in your URL. Example: <a href="http://www.dhtmlgoodies.com/scripts/slidedown-menu2/slidedown-menu2.html?mainMenuItemToSlide=2"> will initially expand the second main menu item. Here, I have added ?mainMenuItemToSlide=2 to the URL.

You may also expand sub menu items automatically by specifying an id. This works as follow:

Give one of your menu items an id. Example:
<li id="initialExpandedMenuItem"><a href="#">Download</a></li>
Specify the id of this menu item in a Javascript variable at the top of the <script> section. Example:
var initMenuIdToExpand = 'initialExpandedMenuItem';

Differences in demo 2

There are just a few differences between demo 1 and demo 2.

First of all, I have made some changes to the CSS in demo 2. Some color attributes has been added to main menu items and sub menu items has been center aligned:

#dhtmlgoodies_slidedown_menu{

  visibility:hidden;
  border:1px solid #000;
  padding:1px;

  width: 182px;  /* IE 5.x */
  width/* */:/**/182px;  /* Other browsers */
  width: /**/182px;

}
...
...
...
...
#dhtmlgoodies_slidedown_menu .slMenuItem_depth1{  /* Main menu items */
  margin-top:1px;
  font-weight:bold;
  background-color:#317082;
  color:#FFF;
  background-image:url('images/bg.gif');
  height:30px;
  line-height:30px;
  vertical-align:middle;
  padding-left:10px;
  border-left:1px solid #000;
  border-right:1px solid #000;
}
#dhtmlgoodies_slidedown_menu .slMenuItem_depth2{  /* Sub menu items */
  margin-top:1px;
  text-align:center;
  font-weight:bold;
}