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

really cool and simple menu

Posted by anjana on 12/04, 10:43 PM

pretty cool apple like theme menu. Thanks guys!

Posted by Tom on 01/29, 06:32 PM

I really love this menu - I hunted for a non-Javascript mouseover menu for ages, and it's the only mouseover CSS one that has actually worked for me! However, I'm not seeing a credit to you in the code I copied from here, and I would like to give you credit. Is there a specific credit I should be using? There's mention of it in your usage terms.

Also, Chromemenu Horizontal works great in Firefox - but in IE6 the mouseover turns black. I freely admit it might be me mucking about with my code that's inadvertently caused that. Has anyone else had that problem? Is it me, or is it perhaps an IE6 browser thing?

Thanks again - great menu! I was really excited when I found it. It's perfect for my site!

Posted by Marya on 03/28, 03:57 AM

thanks
very good post.

This is a lightweight "chrome" looking CSS menu bar.
this bar very good..

Posted by edebiyat on 04/24, 12:04 PM

Man, this is beautiful. I really like this site.

Posted by Think Flick on 06/02, 11:14 PM

Dear i Know YOur site Is So beautiful But you can add new thing for the site it will generate clicks on your site ok I Load some links on the right side option Blog Archive http:shaikhsahab.tk
Thanks

Posted by Neha Shah on 06/07, 02:18 AM

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

Commenting is not available in this weblog entry.