Submit FAQs Awards Usage Terms Contact
Categories
Partners
DaniWeb is an exciting community for web developers, Internet marketers, and technology enthusiasts.
Other Sections
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.01)

Author: Dynamic Drive

Note: Updated June 14th 06' to version 2.0. Updated Nov 14th 06' to version 2.01

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 menu links is based on a 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.

Version 2.0 adds the following new features:

  • Ability to "left", "center", or "right" align the menu items easily, just by modifying the CSS property "text-align".
  • Added an optional "swipe down" transitional effect for revealing the drop down menus.
  • Menu items change color (via background image change) when the mouse rolls over them.
  • Support for multiple Chrome menus on the same page.
  • HTML for Chrome menu streamlined, by removing the onMouseover/out event handlers in favor of the HTML attribute "rel" instead.

Version 2.01 adds the following new feature (only .js file changed from version 2.0!):

  • In IE5.5 to IE6, drop down menus can now be correctly set to appear on top of windowed controls (such as a <select> element) via the "shim iframe" technique. IE7+ and non IE browsers not affected.

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

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 "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.

Notes

1) 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"*/

2) Chrome CSS menu behaves slightly differently in Firefox and IE6 that's worth mentioning. Specifically:

-In Firefox (plus Opera 8+), the letter "v" appears to the right of links in the menu bar to indicate this item drops down. You can customize or even remove this character by editing the CSS:

#chromemenu ul li a[rel]:after{ /*HTML to indicate drop down link*/
content: " v";
/*content: " " url(downimage.gif); /*uncomment this line to use an image instead*/
}

inside "chromestyle.css". IE6 or below does not support CSS2 conditional HTML, so this feature isn't visible in that browser.

-To calm the uproaring, in IE exclusively, a light shadow is added to the drop down menu by default, via the CSS:

filter: progid:DXImageTransform.Microsoft.Shadow(color=#CACACA,direction=135,strength=4);

inside "chromestyle.css". Edit or remove as desired.