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 3 of 7 pages < 1 2 3 4 5 > Last »

Very nice job!!!

So ease to use... Thanks!

Posted by Angrécia on 10/31, 05:13 PM

When i specify the menu to align to the center:
text-align: center; /*set value to "right" for example to align menu to the left of page*/

I get a gap on the right hand side of the screen where the menu is no longer snug with the right hand side of the screen, other then that this is pretty nice, cant use it until that issue is resolved though.

Posted by Leo on 11/02, 02:51 PM

It is good and nice. But I seeing one issue...
I am seeing a space on right side. I also did 99% to 100% but no luck.

I want no space on right side?
Thanks in advance.

Posted by ShoelessJoe on 11/07, 12:09 AM

what do I do with the css code?
do I save it as a file with .css extension or file with .txt extension?????
I've copied the html code in my page but when I opened the page the menu was nowhere to be found!!!
there were just 6 black dots aligned vertically.
Please detail the steps to be made with the css and html code.

Thx

Posted by Albert on 11/09, 04:16 AM

Nice this worked great!!! I like to use the NVU editor like frontpage to do this!! It works in NVU like a charm

Posted by Levi on 11/10, 10:01 PM

Ok, for all of you confused about the button stretching all the way...its a css problem with using a list but all you have to do to fix it is get rid of the line breaks between <li> tags.

For example:
<li>Dynamic Drive</li>
<li>CSS Library</li>

becomes:

<li>Dynamic Drive</li><li>CSS Library</li>

-Earth KING

Posted by Earth KING on 11/25, 02:15 PM

Man...the anchor tags show up as links...but you should be able to still understand that ^up there^.

Posted by Earth KING on 11/25, 02:17 PM

How do I position the Nav Bar on my page, if I want it in an exact position?

Posted by Daniel on 12/01, 01:34 PM

How can I make the popmenu to appear on another frame when working with multiframes pages?? and just keep the main level on one different frame...

Posted by Fernando on 12/11, 07:47 PM

Hi there - great menu - I have altered it a touch to fit my site, and was pleased to see how easy it is to change the graphics for it - very cool and configurable!

But - at the moment I have a flash menu that uses three lines of code - this pushes it up by quite a few lines plus to make changes to urls and button text etc - I would need to change every page (I have limited knowledge)

Is there any way to call the section of HTML from a seperate file the same as the CSS? That way one change to the html file would roll out throughout the site in one go the same as the CSS. Sorry if it's a dumb question but I would really like to know.

Many thanks for the free scripts - you are stars!

Posted by Matt on 12/27, 08:55 PM

Comment Pages 3 of 7 pages < 1 2 3 4 5 > Last »

Commenting is not available in this weblog entry.