New on DHTMLGoodies.com:
DHTML Chess is now available for WordPress at WordPressChess.com.
Download unobtrusive slide out menu
Demo | Demo 2 | Demo 3 (new)
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:
<!--- START MENU HTML -->
<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>
<!-- END MENU HTML-->
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.
Rate this script at Hotscripts.com
Post your comment
Comment preview: