Dynamic Drive CSS Library- Chrome Menu Bar

CSS Library: Horizontal CSS Menus: Here

Chrome Menu Bar

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 (56)

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

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

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