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 1 of 7 pages 1 2 3 > Last »

Thanks a lot for this CSS library! ! !

Posted by Milan on 05/09, 06:50 AM

love it... nice job..

Posted by ducks on 05/09, 11:24 PM

cool , i had a popup earlier now have it removed with this

Posted by Babu on 05/11, 05:10 AM

Hey guys, really nice tutorial, but I prefer it if the blue part stretches the whole length of the button. Is there any way to do that?!

Cheers guys,

Joe

Posted by m0o0oeh on 05/12, 02:51 PM

If you mean so the blue effect covers the entire link area(right now there's a little space on the left side), this was a compromise so that you could easily specify the alignment of the menu links (left, middle etc). To solution to your question is to set the menu links to float and


display: block

, but that means aligning the menu links is no longer a trivial thing. Not a worth while compromise IMO.

Posted by ddadmin on 05/12, 05:32 PM

I think it is, how would the links be aligned if the display: block was put in?

Joe

Posted by m0o0oeh on 05/16, 10:07 AM

Thanks for the CSS lib! This is great and a huge help for people trying to learn CSS and XHTML.

DD does it again...

Lcdude

Posted by Bill on 05/19, 11:10 AM

Man, this is beautiful. I really like this site. Your tutorial format rocks!

Posted by Hermann Klinke on 05/22, 03:38 AM

Love it!

great men...and so easy to modify too

Posted by Brandon on 05/24, 02:23 AM

This is a great easy css menu. Two questions though. Is there a way to make all the buttons on the bar the same width? And is there a way to specify the width of the menu bar without having the seperator after the last menu item. Anyone...

Posted by Eric on 06/12, 09:53 AM

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

Commenting is not available in this weblog entry.