Sunday, March 8, 2009

Navigating the sea of AJAX Accordion Menu Effects & Their Free Templates

I don't code Javascript, etc from scratch, but I am fan of any template, widget, tutorial etc that I can find that enables me to display things like I want. Recently, a web site client described a desired menu-effect that ended up being the 'accordian' style AJAX menu effect - where sections expand and collapse in a smooth, flash-like fashion, without the flash.

While scouring the net for a suitable template for a particular AJAX menu effect that was desired by a client, I discovered that AJAX accordian templates were plentiful, but a crucial requirement was eluding me - the ability to expand the panels when hovering, not clicking.

I finally found this Accordion Menu Script collection at Dynamic Drive. In particular, the Apple style Accordion Menu, which offers the effect upon hover, and also gives you the choice to click or hover in order to trigger the expand.

You can choose if any of the panels are open by default when the menu loads. You can choose how quickly it expands, and as usual the effect delay time after hovering (in milliseconds). The CSS for the display and rollover effects are simple to manipulate and use background images, just don't forget to check everything in Internet Explorer vs non-IE.

I implemented a version of this menu for the Resources page of GPS Elder Care / Grossman Wernicke Inc, a Guardianship & Case Management service in Sarasota Florida.

No comments: