Dynamic Drive CSS Library- CF Navigation Menu

CSS Library

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

Advertise Here

CSS Library: Horizontal CSS Menus: Here

CF Navigation Menu

Author: Dynamic Drive

This is CSS based navigational menu based on a single tab interface. The name "CF" is taken after our partner site CodingForums.com, which at the time of writing uses a menu based on this code. Four images are used as part of its interface- the two round corners, an indented divider between menu links, and a gradient background image spanning the menu.

In case you're wondering, this CSS menu retains its structure well when the text is resized.

Demo:

The image used:

The CSS:

<style type="text/css">

#cfnavbar{
margin: 0;
padding: 0;
}

#cfnavbar ul{
background: url(media/bg.gif) repeat-x;
padding: 0;
margin: 0;
float: left;
font: bold 80% Verdana;
}

#cfnavbar ul li{
display: inline;
}


#cfnavbar ul li a, #cfnavbar ul li span{
float: left;
color: black;
font-weight: bold;
padding: 8px 13px 5px 6px;
text-decoration: none;
background: url(media/divider.gif) top right no-repeat;
}

#cfnavbar ul li span{ /*Targets span tag to the right of #leftcorner below*/
padding-left: 0px;
}

#cfnavbar ul li a#leftcorner{
float: none;
padding-left: 10px;
padding-right: 0px;
background: url(media/leftcorner.gif) top left no-repeat;
}

#cfnavbar ul li a#rightcorner{
padding-right: 10px;
background: url(media/rightcorner.gif) top right no-repeat;
}

#cfnavbar ul li a:hover{
text-decoration: underline;
}

#cfnavbar:after{ /*Add margin between menu and rest of content in Firefox*/
content: "."; 
display: block; 
height: 0; 
clear: both; 
visibility: hidden;
}

</style>

The HTML:

<div id="cfnavbar">
<ul>
<li><span><a href="http://www.dynamicdrive.com" id="leftcorner">Home</a></span></li>
<li><a href="http://www.dynamicdrive.com/new.htm">DHTML</a></li>
<li><a href="http://www.dynamicdrive.com/style/css/">CSS</a></li>
<li><a href="http://www.dynamicdrive.com/forums/">Forums</a></li>
<li><a href="http://tools.dynamicdrive.com/imageoptimizer/">Gif Optimizer</a></li>
<li><a href="http://tools.dynamicdrive.com/button/">Button Maker</a></li>
<li><a href="http://www.dynamicdrive.com/contact.htm" id="rightcorner">Contact</a></li>
</ul>
</div>

<p style="clear: left">Rest of content...</p>

Code Info

Rate this code:

Date Posted: 05/07/2006

Revision History: None

Usage Terms: Click here

Your Comments (39)

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

Very nice navigation menu!

There's a little bug in IE and Opera if you have 3 or less links : The UL element doesn't render fine. To correct this just use this:

#cfnavbar ul li{
display: inline;
margin: 0; padding: 0;
} 

insted of

#cfnavbar ul li{
display: inline;
} 

Posted by Seba on 05/09, 12:32 PM

I am new to CSS and my question is: Do I save the images above individually, or do I save them as one image, or am I even allowed to use the images provided above? Kindly advise. :)

Posted by Naive on 05/16, 09:47 AM

Save the images above individually! Be sure there are correctly referenced in your CSS file (put they in a sub-folder called "media). Have fun! ;)

Posted by Seba on 05/16, 03:48 PM

Thank you, Seba. You are a great help!

Posted by Naive on 05/16, 04:05 PM

Replacing

#cfnavbar ul li a#leftcorner{
float: none;
padding-left: 10px;
padding-right: 0px;
background: url(images/menu_rightcorner.gif) top left no-repeat;
} 

with

#cfnavbar ul li:first-child a{
float: none;
padding-left: 10px;
padding-right: 0px;
background: url(images/menu_rightcorner.gif) top left no-repeat;
} 

will remove the need of placing 'id="leftcorner"' on the first link.

Also, using pseudo last-child will do the same, but for rightcorner on the last link.

e.g.

#cfnavbar ul li:last-child a{
padding-right: 10px;
background: url(images/menu_rightcorner.gif) top right no-repeat;
} 

Cheers!

Posted by moneybagsxp on 05/17, 03:56 PM

Nice scripts, moneybagsxp.

Posted by Naive on 05/17, 04:19 PM

NOTE: I was not able to get my above post to work in IE 6 :(

Posted by moneybagsxp on 05/17, 05:53 PM

moneybagsxp, thanks for the note. Please let me know if you figure it out.

Posted by Naive on 05/17, 06:24 PM

What does it take to center the menu, I tried various options but didn't seem to get it right. I LOVE THESE MENUS!!!

Posted by Michael Shiels on 05/20, 10:27 PM

Hi Michael: Wrap the menu code with <div align="center> and </div>. It works for me.

Posted by Seba on 05/22, 07:02 AM

Comment Pages 1 of 4 pages 1 2 3 > Last »

Commenting is not available in this weblog entry.