Bookmark to del.icio.us
FF1+ IE5+ Opr7+
Chrome CSS Drop Down Menu (v2.5)
Updated: Oct 29th, 08 to v2.5, which adds ability to customize reveal animation speed, plus IE8 beta2 compatibility. Only .js file changed from v2.4!
Demo 2 (left aligned, red theme):
Demo 3 (blue theme):
Demo 4 (right aligned, green theme):
Directions: Simply download chromemenu.zip, which contains all the files that make up the menu:
Note: Also included in the zip are slightly modified versions of the above ".gif" and ".css" files that create a different theme for the menu instantly.
As you can see in the source of "demo.htm", the entire mark up for the menu looks like this:
The list (
The DIVs are the drop down menus you wish to be associated with the menu bar links. Each DIV should be assigned a unique ID (code in red), which is then assigned to the desired menu bar link through the "rel" attribute and by assigning as its value the ID of the drop down menu. That's it!
Just by changing the colors of the two images used by the menu, plus adjust the CSS file accordingly, you can have a different look for your menu. For example:
In the zip file you downloaded above, I've included the alternate versions of the original ".gif" and ".css" files that make up the 4 themes you see above (gray, blue, green, and red). You can easily create your own themes, just by modifying the color of the original images using any decent graphics program, by manipulating the image's Hue/Saturation properties for example.
Multiple chrome menu bars on the same page
You can easily define more than one Chrome Menu bar on a page. Simply duplicate the HTML for each menu bar instance, and at the very end of the page, initialize them all:
For Your Information
You can easily set the alignment of the menu items. Inside
text-align: center; /*set value to "left", "center", or "right"*/
At the top of "chrome.js", there are a few variables you may want to customize:
disappeardelay: 250, //set delay in
miliseconds before menu disappears onmouseout