Dynamic Drive CSS Library- Chrome Menu Bar

CSS Library

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

Advertise Here

CSS Library: Horizontal CSS Menus: Here

Chrome Menu Bar

Author: Dynamic Drive

This is a lightweight "chrome" looking CSS menu bar. The menu uses two variants of the same background image to create the hover effect. The first background image is applied to the entire menu bar, while the second sporting a different color is applied only when the mouse moves over any of the menu links. The menu items can easily be set to either align "left", "center", or "right" on the page, just by changing the "text-align" attribute.

Demo:

The two images (resized for easier download):

The CSS:

<style type="text/css">

#chromemenu{
width: 99%;
font-weight: bold;
font-size: 90%;
}

#chromemenu:after{ /*Add margin between menu and rest of content in Firefox*/
content: "."; 
display: block; 
height: 0; 
clear: both; 
visibility: hidden;
}

#chromemenu ul{
border: 1px solid #BBB;
width: 100%;
background: url(media/chromebg.gif) center center repeat-x;
padding: 5px 0;
margin: 0;
text-align: left; /*set value to "right" for example to align menu to the left of page*/
}

#chromemenu ul li{
display: inline;
}

#chromemenu ul li a{
color: #494949;
padding: 5px;
margin: 0;
text-decoration: none;
border-right: 1px solid #DADADA;
}

#chromemenu ul li a:hover{
background: url(media/chromebg2.gif) center center repeat-x;
}

</style>

The HTML:

<div id="chromemenu">
<ul>
<li><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li>
<li><a href="http://www.dynamicdrive.com/style/">CSS Library</a></li>
<li><a href="http://www.cssdrive.com/">CSS Drive</a></li>
<li><a href="http://tools.dynamicdrive.com/imageoptimizer/">Gif Optimizer</a></li>
<li><a href="http://tools.dynamicdrive.com/favicon/">Favicon Creator</a></li>
<li><a href="http://tools.dynamicdrive.com/button/">Button Maker</a></li>
</ul>
</div>

Code Info

Rate this code:

Date Posted: 05/07/2006

Revision History: None

Usage Terms: Click here

Your Comments (66)

Got a question or need help customizing this CSS code? Post it in the CSS Forums. If you have a comment or suggestion instead, post it in the comments section below.

Comment Pages 2 of 7 pages < 1 2 3 4 > Last »

i wanted to add this on my website but wasnt sure how to do it i added it to the insert HTML Code bit in my sitebuilder but it just apepars as wriitng underneath eahcf other? can some1 tell me why that is?
Thanks

Posted by pranav on 06/13, 10:46 AM

It doesn't really look that great to me...

@pranav: try copying just the source above and making sure it works. Then copy and paste it into your actual source in the right places.

Posted by Nathan on 06/16, 05:16 PM

?? It Doesnt Work, darn and it was such a good menu!

Posted by Julio on 07/02, 02:33 PM

great menu and great tutorial, but i'd like to combine it with the CF menu bar (with the rounded images on the left and on the right) and i tried copying and modifying the code but i couldn't get it to work.. please help

Posted by Sebastian on 07/17, 04:50 PM

Great menu, but you'll notice that, on hovering over all but the far left menu items, there is a left-hand "hangover" of sorts where the rollover background does not apply. I found this rather annoying.

Changing

#chromemenu ul li{
display: inline;
} 

#chromemenu ul li{
display: inline;
border-left:1px solid #DADADA;
} 

puts a double-border between every two menu items, and the background fills in flush against both borders. It still looks good left-aligned, centered, and right-aligned, as well.

Posted by Andrew on 07/24, 01:26 PM

Posted by david on 08/08, 03:21 PM

The blue bar on rollover isn't showing up on all my buttons, why is this?

Posted by Mimi on 09/02, 02:24 PM

Great use of CSS with an eye-catching menu that is simple to use. Thanks for making this available. One question for you: Please see my URL. Any way to use the hover effect for other links without causing them to appear in the menu?

Posted by Phil Blankenship on 09/03, 11:10 PM

yes i like it so much but why i do it not work?
i mean it's don't work change at on mousover :D
or i make some misstake please explain to me
thank you :D

Posted by SmileBuffalo on 09/23, 03:05 AM

This is fantastic... I combined this with another on Dynamic Drive to give my site a real nice look with professional and progressive appeal, which isn't bad considering I am teaching myself html... couldn't do it without you...

Posted by Rent New Tampa on 10/23, 04:52 PM

Comment Pages 2 of 7 pages < 1 2 3 4 > Last »

Commenting is not available in this weblog entry.