Note: Updated March 22nd, 07' by Dimx. Script completely overhauled for various new features.

Description: This is a stylish collapsible menu modelled after the navigational menu found on Slashdot. Configure the menu in a multitude of ways, such as which sub menus to expand by default, whether to persist menu states using cookies, to the speed in which menu items expand/ collapse. Very cool.

Demo: The menu titles expand and contact onclick:

When initializing a Slashdot menu on your page, the following optional methods can be used to customize it:

var myMenu = new SDMenu("main_menu"); // ID of the menu element
// Default values...
myMenu.speed = 3;                     // Menu sliding speed (1 - 5 recomended)
myMenu.remember = true;               // Store menu states (expanded or collapsed) in cookie and restore later
myMenu.oneSmOnly = false;             // One expanded submenu at a time
myMenu.markCurrent = true;            // Mark current link / page (link.href == location.href)

myMenu.init();

// Additional methods...
var firstSubmenu = myMenu.submenus[0];
myMenu.expandMenu(firstSubmenu);      // Expand a submenu
myMenu.collapseMenu(firstSubmenu);    // Collapse a menu
myMenu.toggleMenu(firstSubmenu);      // Expand if collapsed and collapse if expanded

myMenu.expandAll();                   // Expand all submenus
myMenu.collapseAll();                 // Collapse all submenus
     

Download:

Simply download sdmenu.zip, and refer to the HTML page inside. You may wish to view the menu's sdmenu.js and sdmenu.css files.