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 Firefox 2/3, IE 6/7/8, Opera, Safari and Chrome. Note that submenu animation is currently unavailable in FF2 and Opera but do does not affect the functionality of the drop down menu. Please send any bug reports to michael@leigeber.com with the title “BUG REPORT”. This script is available for any personal or commercial projects and is offered AS-IS, NO FREE SUPPORT PROVIDED.

Click here for the demo.

Click here to download the source code.

This JavaScript table sorting script is easy to use, fast and lightweight at only 1.7KB. It includes alternate row formatting, header class toggling, auto data type recognition and selective column sorting. It will currently sort strings, numbers and currency. More features will follow.

To initialize sorting use the following code:

var sorter=new table.sorter("sorter");
sorter.init("sorter",1);

You must create a new table sorter object before initialization. The parameter taken by table.sorter is the variable name used for the object. The object.init function takes 2 parameters: the id of the table and the index 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 Firefox 2/3, IE 6/7/8, Opera, Safari and Chrome. Please send any bug reports to michael@leigeber.com with the title “BUG REPORT”. This script is available for any personal or commercial projects and is offered AS-IS, no free support provided.

Click here for the demo.

Click here to download the source code.

I would also like to thank my first sponsor, WebbyNode, and encourage you all to sign up for their beta Xen VPS Service by visiting their website.

This lightweight (1.3 KB) animated JavaScript accordion is an update to the original accordion script posted on April 18th. It is now smaller, faster, supports multiple instances and includes an active header class toggle. The markup is also improved through the use of definition lists and the CSS has been simplified as well.

On a side note, you may have noticed that I have not posted in over 4 months. I have moved from Colorado to North Alabama and am now working for Summit Technology focusing on SharePoint development. This change has really taken a lot of my time and hopefully now I will be able to post again. I will begin by updating many of my existing scripts.

If I have not responded to an email you have sent I apologize. I will try and get to them all in time. I will now be taking donations (via PayPal at michael@leigeber.com) and accepting a few advertisers to support my time here. Unfortunately, due to the massive amount of email I get, I will not longer be offering any free support via email. Please contact me if you are interested in paid support.

To initialize an accordion use the following code:

var mySlider=new accordion.slider("mySlider");
mySlider.init("slider",0,"open");

You must create a new accordion object before initialization. The parameter taken by accordion.slider is the variable name used for the object. The object.init function takes 3 parameters: the id of the “dl”, the index of the initially expanded section (optional) and the class for the active header (optional).

There is no other JavaScript that needs to be added to the HTML. The init function parses the definition list and adds the appropriate mouse events to the headings. This has been tested in Firefox 2/3, IE 6/7/8, Opera, Safari and Chrome. Please send any bug reports to michael@leigeber.com with the title “BUG REPORT”. This script is available for any personal or commercial projects.

Click here for the demo.

Click here to download the source code.

This animated JavaScript tooltip script is very easy to use and lightweight at only 2kb. It is tested working in IE6+, Firefox, Opera and Safari. Jacob Gube of Six Revisions has posted the script and a walk-through of the code and the logic. As always, don’t hesitate to send questions or bug reports to michael@leigeber.com. I look forward to upcoming guest posts by Jacob on this blog as well.

Click here to visit the post at Six Revisions.

Click here for the demo.

Click here to download the script.

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')

The first variable is the id of the unordered list and the second is the id of the slider div. This script has been tested in IE6, IE7, FireFox, Opera and Safari. Please send any bug reports to michael@leigeber.com. This code is free to use for any personal or commercial projects.

Click here to download the script.