Dynamic Drive CSS Library- Chrome Menu Bar

CSS Library

CSS Layouts

Web Graphics

Free Icons

Online Tools:

PSD to HTML

HTML Editor

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 6 of 7 pages « First < 4 5 6 7 >

This is no good if you can't control the position and width.

Posted by lisa toohey on 05/01, 09:56 AM

You can use main div in align to centre
ok

Posted by SV Creation on 05/03, 11:24 AM

Wow..Cool...I love this Css.
Thanks Very Much...

Posted by Cool on 05/05, 06:07 PM

nana

Posted by ddd on 05/14, 02:13 AM

Excellent you this rocks

Posted by Mo on 05/28, 11:22 AM

thanks for the tips

Posted by Phone Number on 06/05, 12:30 PM

I need help. What should I name the css file and html file?
I try to use the code but only text displays and I am unable to make this code work for me.

Can someone help me please.

Posted by Daniel on 07/29, 09:32 AM

This works poorly due to a bug in IE 7: When you change IE's font size using Ctrl-+/-, the menu header text falls out of the <li> elements. Anyone know how to fix this? Thanks.

Posted by Sean on 09/03, 08:14 AM

Thank you very much ^^
It's great job !!

Posted by gigkokman on 09/17, 02:26 AM

This will not work in Windows Internet Explorer!

Posted by Kenny on 11/07, 11:36 AM

Comment Pages 6 of 7 pages « First < 4 5 6 7 >

Commenting is not available in this weblog entry.