New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact
Categories
Other Sections
Sweet Ads
Compatibility
  • IE5+: IE 5 and above
  • FF1+: Firefox 1.0+. NS6+ and FF beta are assumed as well.
  • Opr7+: Opera 7 and above.
Bookmark online:
FF1+ IE5+ Opr7+

Chrome CSS Drop Down Menu (v2.5)

Author: Dynamic Drive

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!

Description: We decided to create this script when we needed a compact CSS drop down menu for a project. Chrome Menu is a CSS and JavaScript hybrid drop down menu. It's easy to configure and search engine friendly. The main menu bar consist of a CSS list, while the drop down menus are simply regular DIV tags on page. Thanks to JavaScript, the menu supports subtle but important effects such as delay before menu disappearance, and repositioning of the menu if too close to any one of the four corners of the window. The entire menu, including images and external files, is extremely compact. Thanks to CSS, the menu can be styled with a different "theme" easily, just by modifying a few CSS attributes and changing a couple of images' colors. Some highlights of this menu:

  • 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 SELECT element) using the "shim iframe" technique.
  • Support for multiple Chrome menus on the same page.

Demo:

Demo 2 (left aligned, red theme):

Sample form to demonstrate hover over windowed objects in IE5.5 to IE6 via iframe shim technique. IE7+ not affected by issue.

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)
  • chrometheme/chromebg.gif
  • chrometheme/chromebg-over.gif
  • 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:

<div class="chromestyle" id="chromemenu">
<ul>
<li><a href="http://www.dynamicdrive.com">Home</a></li>
<li><a href="#" rel="dropmenu1">Resources</a></li>
<li><a href="#" rel="dropmenu2">News</a></li>
</ul>
</div>

<!--1st drop down menu --> 
<div id="dropmenu1" class="dropmenudiv">
<a href="http://www.dynamicdrive.com/">Dynamic Drive</a>
<a href="http://www.cssdrive.com">CSS Drive</a>
<a href="http://www.javascriptkit.com">JavaScript Kit</a>
</div>


<!--2nd drop down menu --> 
<div id="dropmenu2" class="dropmenudiv" style="width: 150px;">
<a href="http://www.cnn.com/">CNN</a>
<a href="http://www.msnbc.com">MSNBC</a>
<a href="http://news.bbc.co.uk">BBC News</a>
</div>

<script type="text/javascript">
cssdropdown.startchrome("chromemenu")
</script>

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 JavaScript function "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!

Alternate themes

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:

<script type="text/javascript">
cssdropdown.startchrome("chromemenu", "chromemenu2")
</script>

Where "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)