free hosting   image hosting   hosting reseller   online album   e-shop   famous people 
Free Website Templates
Free Installer

DHTML
Cascading Menu


This script creates a cascading DHTML menu with opening/closing folders, similar to Windows Explorer.

It's very fast, and only 3 images are required:

Right-click on each graphic and "Save As ..."

Menu Features:

  • submenu drops down when the menu heading is clicked
  • closed folder image changes to open when submenu appears
  • a second click closes the submenu and displays the closed folder image again
  • only submenu from selected menu is displayed
  • single menus (no submenus) are permitted
  • fully customisable - as many menus and submenus as you like
  • any font style and size permitted
  • cross-browser compatible (IE4 & 5, NS4, NS6)

    • Paste the code below in the head section of your page:
    Paste this before the body tag:
    where right is the name of your target URL frame.

    To open in a new window, use:
    <base target="_blank">
    To open in the same window or, omit entirely, since it will do that by default.


    Finally, paste this in the body section:

    How It Works

    Click here to view the sample menu frames page, and try it out as you read.

    You'll see that there are 5 menu items:
  • Forms
  • Images
  • Links
  • Music
  • Google
    • The first 4 menus have submenus, so they have an associated closed folder graphic.

    The final menu - Google - is a single hyperlink (no submenu), so it has a page icon instead.


    Click on the Forms link and the graphic changes to an open folder.

    Simultaneously, the entire menu expands.

    The Forms submenu drops down, revealing 5 submenu items:
  • Area Convertor
  • Checkbox Validator
  • Custom Email Form
  • Form Validation
  • Loan Calculator
    • The following menus work the same way:
  • Images - 4 items
  • Links - 5 items
  • Music - 3 items
    • Whenever you click on any main menu a second time, its submenu closes and the entire menu system collapses.

    The only exception is the Google menu, which doesn't have a submenu.

    Also, all other menus are shifted to accommodate the submenu dropdowns.

    Just like Windows Explorer.


    The Importance of Positioning

    Each component of the menu system relies on precise absolute positioning.

    Otherwise the desired effect will be less than satisfactory.

    Each menu and submenu has its own div container, and the spacing between them is vital.

    If you want to use different-sized fonts, you must adjust the pixel spacing accordingly.


    Setting Up

    The number of allowable menus and submenus is unlimited.

    And style settings for links, etc, are up to you (remember that font size affects positioning).

    However, the script does need to know the following menu parameters:
  • the number of menus
  • the number of items in each submenu
  • the height in pixels of each submenu item
    • These need to be stated at the top of the script in this format: 
    var nom = 5;               // Number of menus
var itemheight = 16;       // 16px height per item
var movearray = new Array  // number of submenu items
(
   5,     //  Forms
   4,     //  Images
   5,     //  Links
   3,     //  Music
   0,     //  Google (no submenu)
)
    For example, if you require:
  • 6 menus
  • different-sized submenus
  • an itemheight of 14 pixels
    • then the details might look something like this: 
    var nom = 6;                  // Number of menus
var itemheight = 14;          // 14px height per item
var movearray = new Array     // number of submenu items
(
   5,     //  Menu 1
   7,     //  Menu 2
   2,     //  Menu 3
   1,     //  Menu 4
   0,     //  Menu 5
   8,     //  Menu 6
)

    With the itemheight variable, this value depends on the submenu font size.

    As a rule of thumb, make this 2 - 5 pixels larger than the font.

    Or simply use trial-and-error to see what looks and works the best.


    And - most important - every menu must have an associated submenu div container.

    Even if the menu has no submenu!

    That's because the script will look for a submenu array, even if it's empty.

    If there's no div container for that empty array element, the script won't run correctly.


    Try It Out

    Click here for sample menu frames page.




    © 2001 CyberSchool