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

man this is so gonna be on my website

Posted by soulsteel on 08/21, 01:11 PM

Hi guys! Im having a little problem with Firefox! In IE the menu appears fine, but in Firefox the border is larger than it should!I think its a problem with the padding....can anyone help please??

Posted by Carlos on 08/24, 01:40 PM

So if i set it to block i have to realign?

Posted by jx on 08/29, 11:10 AM

Thanks . I think chrome menu bar very useful .

Posted by indomeso on 09/18, 01:00 AM

Hi - I'm using the Chrome Menu Bar
but when you shrink the brower window, the menu bar crumples up towards the left? Can you give me some pointers?

Thank You

Posted by Paul on 10/10, 12:56 PM

Hey! Great menu bar, I love it. I'm having a slight problem though. It works fine in IE7, but the image doesn't change in Firefox on rollover. Any suggestions? Thanks.

Posted by Alex Jordan on 10/28, 12:43 PM

AAAA This very simply great to learn about menu bar
this is very cooool site

is there any help like this about how to make very rich graphical tool tips?

Thanks again

Posted by Hemant Kulkarni on 11/14, 05:35 AM

pretty good :)

Posted by ÖZGÜR SRKMŞ on 12/20, 05:44 PM

Hi, I love the chrome menu, managed to tweek it, super look. Can I customize it to a vertical tree menu or combine it with a vertical tree/suckerfish menu? Or is there one that I can use as both, horizontal and vertical?

Posted by valerie bradley on 01/09, 04:53 PM

How do I make all the buttons center align???

Posted by Kaspars on 03/12, 12:21 PM

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