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.
Set as favorite
Bookmark
Email This
Hits: 3931
Comments (1)
Show/Hide comments
Write comment
Show/Hide comment form
| < Prev | Next > |
|---|
Newer news items:
- 24/04/2008 01:28 - Accordion v2.0(prototype)
- 07/04/2008 00:27 - Easy Scroll
- 02/02/2008 20:24 - searchfield(css,js)
- 04/01/2008 06:59 - Spellify
- 20/12/2007 20:00 - HighSlide
Older news items:
- 09/12/2007 03:24 - AJAX-S
- 26/11/2007 21:01 - Accessible Unobtrusive Slider
- 26/11/2007 01:19 - Yet(E)Another Tab Interface
- 19/11/2007 01:11 - Corner Dock
- 08/11/2007 03:49 - Simple Javascript Accordions
