In this DHTML menu script, the submenu slides to left or to the right. The menu is based on an unordered list(

• ) which makes it search engine friendly and visible to users with Javascript disabled.

   

Download:slide-out-menu.zip

Demo1

Demo2

Layout

You use CSS(the part between and ) to customize menu layout. Look at my comments there for further help.

Javascript configuration

You have some Javascript variables available which you could use to customize the menu:

var timeBeforeAutoHide = 700;
var slideSpeed_out = 10;
var slideSpeed_in = 10;
var slideTimeout_out = 25;
var slideTimeout_in = 10;
var showSubOnMouseOver = true;
var fixedSubMenuWidth = false;
var xOffsetSubMenu = 0;
var slideDirection = 'right'; var firefox15SubWidth = 110;

• timeBeforeAutoHide = Delay in microseconds from when mouse leaves menu until it's hidden automatically
• slideSpeed_out = Slide speed out - higher value = faster
• slideSpeed_in = Slide speed in - higher value = faster
• slideTimeout_out = Slide speed out - microseconds between each step(Lower = faster)
• slideTimeout_in = Slide speed in - microseconds between each step(Lower = faster)
• showSubOnMouseOver = Show sub menu on mouse over or mouse click. true = mouse over, false = mouse click.
• fixedSubMenuWidth = Sub menu width in pixel. Use false if width should be set automatically.
• xOffsetSubMenu = pixel to offset sub menu(horizontally). (You might want to use -2 if the menu slides to the left)
• slideDirection = Slide menu to the left or to the right.

Menu depth

Currently, there isn't support for unlimited levels of submenus. Only main menu items can have a sub menu. I will try to add support for unlimited depth later.

Comments (1)

Show/Hide comments

Tracy said:

	... This script is useful if you only need to use it once, since it uses ID's at the parent level you can't use this multiplies on the same page
	report abuse vote down vote up

July 16, 2008 | url
Votes: +0

Show/Hide comment form

Name

Email

Website

Comment

smaller | bigger

Subscribe via email (Registered users only)

I have read and agree to the Terms of Usage.

Write the displayed characters

Add Comment