Download unobtrusive slide out menu

Licensing

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.

Configuration

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">
<ul>
  <li><a href="#">New scripts</a>
    <ul>
      <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>
    </ul>
  </li>
  <li><a href="#">Updated scripts</a>
    <ul>
      <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>
    </ul>
  </li>
  <li><a href="#">Support us</a>
    <ul>
      <li><a href="#">Link to us</a></li>
      <li><a href="#">Recommend us</a></li>
      <li><a href="#">Donate</a></li>
    </ul>
  </li>
  <li><a href="#">Forum</a>
    <ul>
      <li><a href="#">Topic one</a></li>
      <li><a href="#">Topic two</a></li>
      <li><a href="#">Topic three</a></li>
    </ul>
  </li>
  <li><a href="#">Contact us</a>
    <ul>
      <li><a href="#">Support</a></li>
      <li><a href="#">Feedback</a></li>
      <li><a href="#">Submit a script</a></li>
    </ul>
  </li>
  <li><a href="#">The end(no subs)</a></li>
</ul>
</div>

This is the HTML for the menu in the demo.

Layout

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.