Dynamic Drive CSS Library- Chrome Menu Bar

CSS Library

CSS Layouts

Web Graphics

Free Icons

Online Tools:

Website Templates

Social Media Applications

PSD to HTML

Web Templates

Website Hosting

HTML Editor

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

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

superb menu, nice and clean.
and as a bonus - its fluid!!!

Posted by liam on 12/30, 07:10 AM

Great Drop down .... love it....

I however want to put it on a centered page. I centered with a wrapper div:

#wrapper {
position: relative;
width: 940px;
margin:0 auto;
text-align: left;
}

Now the drop down menus move off to the right...can't seem to figure how to get them back directly under the top menu choice.

thx for any help

Posted by Lori on 01/23, 10:05 AM

is there a way to make this a vertical menu?

Posted by mike on 04/04, 05:57 PM

how do you shorten the height of the menu (so there's not so much vertical space)?

Posted by Carla on 04/13, 08:01 PM

Hey

Nice menu, and thanks for making this available.

Posted by Jean on 05/09, 10:19 AM

We found your entry via TypePad Hacks, modified it (despite our very limited CSS skills) and are using it on our site, Serial Drama (http://serialdrama.typepad.com/). We think it looks great, plus it freed up a bunch of space in our sidebars. Thanks so much!

Posted by Serial Drama on 06/10, 03:40 PM

I love this menu! How do I modify it to display as a vertical menu?

Posted by Rosa on 07/14, 10:25 AM

is it possible to have all of the buttons a fixed width?

Posted by Paul on 08/07, 09:37 AM

This is awesome, looks great, can use any image and small amount of code to implement

Posted by DJinHouston on 08/17, 11:36 AM

Erm..I juz wanna noe how to reduce the space on the left n the right on the menubar..and i dunno wat code i shall put in to change the font n font size for this .css....can anyone lend me a hand on this?Thx

Posted by Aaron on 08/19, 07:38 AM

Comment Pages 4 of 6 pages « First < 2 3 4 5 6 >