This update to the TinyDropdown dropdown menu script offers improved stability, speed, and features. Added features include animation toggles, a speed toggle, a rollout timeout, and improved style handling. The script is still very lightweight at only 1.7KB packed and should perform noticeably better than the previous version. Styling is completely flexible through the CSS… you can even make this a vertical menu with a few tweaks.

The script is executed by passing an object to the init function. A sample call would look like the following:

var dropdown=new TINY.dropdown.init("dropdown", {id:'menu', active:'menuhover', fade:true, slide:true, timeout:200});

Parameters include (tag – description (type) – default):

id - ID of the navigation (string - required) - ''
active - CSS class for active state (string) - ''
fade - toggle fade tween (bool) - true
slide - toggle slide tween (bool) - true
speed- toggle slide tween (1-9) - 5
timeout - time in milliseconds to pause before hide on rollout (int) - 200

Click here for the demo.

Click here to download.

This script is tested in IE7+, FF, Chrome, Opera, and Safari and is available free of charge for both personal or commercial projects under the creative commons license. I welcome any bug reports. Head to the Scriptiny QA for community support.

This multi-level drop down menu script weighs in at only 1.2 KB. It features animation, active header persistence, easy implementation and multiple instance support.

To initialize a drop down menu use the following code:

var menu=new menu.dd('menu');
menu.init('menu','menuhover');

You must create a new menu object before initialization. The parameter taken by menu.dd is the variable name used for the object. The object.init function takes 2 parameters: the id of the menu unordered list and the id of the initially sorted column (optional). If you want to exclude a column from sorting then add class=”nosort” to the appropriate table header. The styling of the table is totally customizable via CSS.

This script has been tested in all major browsers and is available free of charge for both personal or commercial projects under the creative commons license. Community support is available here. Paid support is also available, contact me for details.

Click here for the most recent version.

Click here for the demo.

Click here to download.

This sliding hover effect script is an easy method to add some flavor to your navigation. Using the CSS you can easily customize the navigation to fit your “look and feel”. The markup for the script is very simple as below.

<div class="menu">
<ul id="menu">
<li><a href="#">JavaScript</a></li>
<li><a href="#">Graphic Design</a></li>
<li><a href="#">HTML</a></li>
<li value="1"><a href="#">User Interface</a></li>
<li><a href="#">CSS</a></li>
</ul>
<div id="slide"></div>
</div>

In the above code the default menu selection is identified by the value=”1″ attribute on the appropriate list item. To initialize the script simply call the function as below.

menuSlider.init('menu','slide')

This script has been tested in all major browsers and is available free of charge for both personal or commercial projects under the creative commons license. Community support is available here. Paid support is also available, contact me for details.

Click here to download the script.

This versatile 1kb horizontal accordion script can be used for menus, images, presentation content and more. I had seen a similar looking feature on the mootools homepage and set out the replicate the functionality as a standalone script and as lightweight as possible. The script will automatically adjust to the number of elements in the accordion and the dimensions of the accordion.

The front-end markup for the script is a simple unordered list as in the example below…

<ul>
	<li><img src="images/1.gif" alt="" /></li>
	<li><img src="images/2.gif" alt="" /></li>
	<li><img src="images/3.gif" alt="" /></li>
	<li><img src="images/4.gif" alt="" /></li>
</ul>

To build the accordion call the function below onload…

slideMenu.build('sm',200,10,10,1)

The first parameter is the id of the unordered list you would like to bind the accordion to. The second is the width you would like the accordion selection to expand to. The third is the timeout variable to control how quickly the sliding function is called. The fourth is the speed of the accordion with 1 being the fastest. The last is optional and is the integer that corresponds to the section you would like to be expanded when the accordion is loaded.

This script has been tested in all major browsers and is available free of charge for both personal or commercial projects under the creative commons license. Community support is available here. Paid support is also available, contact me for details.

Click here to download the original script.

Click here to download the script that collapses onmouseout.

Update 5/26/2008 – Removed a line of unnecessary code and resolved an issue with IE6.
Update 5/26/2008 – Tweaked width parsing code, thanks to realazy for the suggestion.
Update 6/05/2008 – Added download for version that reverts back the the uniform collapsed positions.

This animated JavaScript flyout menu is clean and lightweight at only 1.6kb. The script is based on the post a few weeks ago of a horizontal dropdown menu. The markup is the same so visit the horizontal menu post for details.

This script has been tested in all major browsers and is available free of charge for both personal or commercial projects under the creative commons license. Community support is available here. Paid support is also available, contact me for details.

Click here for the demo.

Click here to download the source.

This script has been replaced by a new with multi-level support here.

This lightweight JavaScript drop down menu script (~1.6kb) allows you to easily add smooth transitioning dropdowns to your website. This can be used for navigation, dropdown lists, info panels, etc. The script has been tested working in IE6, IE7, IE8, Firefox, Opera and Safari. The markup for the menu including the mouse events looks like the following.

<dl class="dropdown">
<dt id="one-ddheader" onmouseover="ddMenu('one',1)" onmouseout="ddMenu('one',-1)">Dropdown One</dt>
<dd id="one-ddcontent" onmouseover="cancelHide('one')" onmouseout="ddMenu('one',-1)">
<ul>
<li><a href="#" class="underline">Navigation Item 1</a></li>
<li><a href="#" class="underline">Navigation Item 2</a></li>
<li><a href="#" class="underline">Navigation Item 3</a></li>
<li><a href="#" class="underline">Navigation Item 4</a></li>
<li><a href="#">Navigation Item 5</a></li>
</ul>
</dl>

You can have as many dropdowns on one page as you like. Just be sure and have a unique naming scheme for each menu (i.e. one-ddheader, two-ddheader, etc). The “look and feel” is fully customizable though the CSS and you can replace the unordered list with any content you like if you are not looking for a menu.

This script has been tested in all major browsers and is available free of charge for both personal or commercial projects under the creative commons license. Community support is available here. Paid support is also available, contact me for details.

Click here for the demo.

Click here to download the source.

Click here for a vertical flyout version of this menu.

By Request: Slideup version demo.

Update 4/28/2008 – I have updated the HTML and CSS to use a definition list and an unordered list in lieu of the previous div-based layout. Thanks to Paul and Deigo for the suggestion.
Update 4/28/2008 – Fixed flicker issue in FF2 on Mac and “-1″ error in IE when quickly moving from the menu to the browser. Thanks to Philip and Chris for reporting these.
Update 5/16/2008 – Optimized the code reducing size by ~15%.