Hot!Ajax

slide-out-menu

Monday, 10 December 2007

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.

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.

Set as favorite

Bookmark

Email This

Comments (0) add comment