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!
- Ability to easily "left", "center", or "right" align the menu items easily, just by modifying the CSS property "text-align".
- Optional "swipe down" transitional effect for revealing the drop down menus.
Main menu items appear "selected" when the mouse rolls over them, which
includes while the mouse is over the corresponding drop down menu. Style
this state as desired by customizing the "
.selected" CSS class name inside "chromestyle.css." New in v2.4
- Specify arbitrary HTML that gets added to the end of each menu item to indicate it carries a drop down menu. New in v2.4
In IE6, drop down menus correctly appear on top
of windowed controls (such as a
SELECTelement) using the "shim iframe" technique.
- Support for multiple Chrome menus on the same page.
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:
- demo.htm (view)
- chromejs/chrome.js (view)
- chrometheme/chromestyle.css (view)
- down.gif (drop down arrow image used).
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 (
<ul>) above makes up the menu bar itself, and
should be assigned a unique ID (ie: "
chromemenu"). This ID is then passed to the
cssdropdown.startchrome()", at the end of the menu. When defining
multiple Chrome menu bars on a page, separate each menu's ID with a comma when
passing them each into the function. More info below.
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:
chromemenu" is the ID of the first Chrome Menu bar,
chromemenu2" is the second, and so on. Separate each ID with a semicolon.
For Your Information
You can easily set the alignment of the menu items. Inside
chromestyle.css, find and edit the line:
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
dropdownindicator: '<img src="down.gif" border="0" />', //specify full HTML to add to end of each menu item with a drop down menu
enablereveal: [true, 8], //enable swipe effect? [true/false, steps (Number of animation steps. Integer between 1-20. Smaller=faster)]
enableiframeshim: 1, //enable "iframe shim" in IE5.5 to IE7? (1=yes, 0=no)