Download unobtrusive slide out menu

Demo | Demo 2 | Demo 3 (new)

Bookmark and Share


This script is distributed under the LGPL open source license.
Commercial licenses are also available. Some of these licenses also includes personal e-mail support for up to 1 year.

Download files

You can download this menu script from this zip file.


This zip file now contains two versions of the menu. The old version doesn't support nested sub menus. You will find that version in dhtmlgoodies-slide-out-menu.html and dhtmlgoodies-slide-out-menu-ex2.html. The new version which supports nested sub menus can be found in slide-out-menu-new.html (Thanks to Dean Parkinson for the help with this widget).

Building the menu

You build the menu by creating an unordered list(<UL><LI>). Example:

<div id="dhtmlgoodies_menu">
  <li><a href="#">New scripts</a>
      <li><a href="#">Slide out menu</a></li>
      <li><a href="#">Content organizer</a></li>
      <li><a href="#">Slide in pane</a></li>
      <li><a href="#">Chess widget</a></li>
      <li><a href="#">Color picker</a></li>
  <li><a href="#">Updated scripts</a>
      <li><a href="#">Calendar script</a></li>
      <li><a href="#">Tab menu</a></li>
      <li><a href="#">DHTML menu</a></li>
      <li><a href="#">Slide in pane</a></li>
  <li><a href="#">Support us</a>
      <li><a href="#">Link to us</a></li>
      <li><a href="#">Recommend us</a></li>
      <li><a href="#">Donate</a></li>
  <li><a href="#">Forum</a>
      <li><a href="#">Topic one</a></li>
      <li><a href="#">Topic two</a></li>
      <li><a href="#">Topic three</a></li>
  <li><a href="#">Contact us</a>
      <li><a href="#">Support</a></li>
      <li><a href="#">Feedback</a></li>
      <li><a href="#">Submit a script</a></li>
  <li><a href="#">The end(no subs)</a></li>

This is the HTML for the menu in the demo.


You use CSS(the part between <STYLE type="text/css"> and <STYLE>) 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.

Rate this script at

If you like my script, please rate it at


Useful menu, but it did take quite some time to adapt to my purposes, which was to use images instead of text. Biggest issue was figuring out when the javascript was activated while I had my own on-load function. Must still resolve a final issue which is setting the width of the sub-menu.
David at 02:16PM, 2011/04/17.
Do not work on Firefox. Sad.
Alberto at 01:03AM, 2011/08/21.
it works perfectly for me..great job.
I'd like to don't overlay the menu on roll-over/click (like autoHide in the first version) is possible do it in the new version?
could you help me please?

will be great!
alessandro at 06:30AM, 2011/10/28.
Very nice job. The code is very neat in .js file. I was wondering if you could help me around with a problem I m facing. I ‘m trying to make two separate menus on the same page. What I tried is duplicate and renamed all the variable names and function names on .js file and the relevant .css thought what is happening is I get only the first menu on the page, the second menu doesn’t appear at all. I did that after I fount out that I cant call the menu on the html twice not even with the same id ex. (id="a_menu"). The objective is to make two menus on the same .php page (a_menu, b_menu). Thank you in advance.
gasoum at 12:47AM, 2011/12/11.
doesn't work on weebly. :(
super at 06:45PM, 2012/03/03.
The menu works great but the new multilevel menu doesn't keep the menu path highlighted when you go to the sub menus. I've been trying to find a way to modify either the JS or the CSS but haven't been successful. Does anyone have a fix for keeping the parent link highlighted when moving to the child link? It's confusing to know which menu item you selected if you don't use borders. The single level menu does not have this issue.
Bob at 03:13PM, 2012/03/12.
wait... how do you use an image instead of text??? im trying to figure it out buts just not working. i havnt coded anything in forever so im super rusty.

nico at 01:06PM, 2012/05/06.
Does anyone know how to make this menu work for multiple different divs, with different IDs?
Kyle at 12:43PM, 2012/05/09.
Whenever I try only the last div that passes through the method renders correctly. The other ones just do nothing when hovering the mouse over them.
Kyle at 01:34PM, 2012/05/09.
Is it possible, to resize the menu items with the single items having different heights?
belafleck at 11:35AM, 2012/05/28.
I love this menu especially the way it moves in and out.
But I have an question.
I would like to have it Horizontal. The menu needs to drop down.
I managed to get it horizontal.. But the items still moves to the right or left not down..
I know you have an Horizontal menu also on you site. But that one doesn't move so nice, I tried to implement that but could not get it to work.
Here is what I got so far.:
Can you help me?
I would really appreciate it.
DandA at 02:36AM, 2012/10/24.
eng mostafa
thank you but i can include background picture under every url
eng mostafa at 12:16PM, 2013/04/01.
Is there an easy way to make it horizontal and vertically down?
By the moment I couldn,t via CSS
jose at 01:59PM, 2013/04/28.
jerry holmes
I have this exact menu on my site It has always worked great but I just moved to another host at it is not working.I have checked to make sure all my files moved over and had to add one. Anything that it could be? I would appreciate the help.
thanks jerry holmes
jerry holmes at 07:54PM, 2015/01/30.
by the way you link produces a 404 (Requested file not found)
Unsupported by certain browsers. Hopefully this gets fixed!
My email is the comment poster thinks my email is broken????,
Max at 06:28AM, 2015/07/09.

Post your comment

Don't have an avatar? Create one at

Confirmation code:

Go to

About/Contact | A good idea? | Submit a script | Privacy notice
© 2005 - 2016