jDiv

A Skyrocket Labs jQuery plugin

« Read the original post for a breakdown of the code used for this effect

The What & the Why

Late last year, I was working on the UI for a potential project and I needed a drop-down menu that displayed any content I needed, specifically a combination of images and lists. I didn't feel that only using a UL style was semantic enough or gave me the flexibility I needed. So, jDiv was born.

Demo

Hover over the first link to see the effect:

This is the hidden panel that can display any content you wish.

Perhaps you would like a description here and your section's links to the right.

Download & Usage

Download .zip for the XHTML, JS and CSS used in this demo

Modify the content in the #hidden-div container with what you wish to display on hover.

To add multiple DIVs for a full menu, repeat the process in the jdiv.js file and assign each its own ID (#menu1, #menu2, #menu3, etc).

Remember to assign each menu item and container in your XHTML with the same IDs in the jQuery script!

Change Log

02.06.2010 - Added $("#hidden-div").stop().fadeIn(); to prevent animation queue buildup. Thanks to Jordan for the suggestion.

Terms & Support

Tested in: Firefox 3.5.6, IE 7, IE 8, Google Chrome and Safari

You are welcome to use and modify this script as you like. I'd appreciate a link back to my site.

Due to my need to focus on client support, i can't guarantee that I can respond to requests for help but you can email me at fred(at)skyrocketlabs.com.