JavaScript Dropdown Menu

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:

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

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

1	id - ID of the navigation (string - required) - ''

2	active - CSS class for active state (string) - ''

3	fade - toggle fade tween (bool) - true

4	slide - toggle slide tween (bool) - true

5	speed- toggle slide tween (1-9) - 5

6	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.