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

sweet.. i love these guys

Posted by sensison on 11/07, 01:48 PM

I was wondering if you could produce different color buttons besides green. I like them, but I like to change my site around a lot and a new color every now and then would be nice.

I love this menu. I just started using it on my site.

Posted by kg4ysy on 12/16, 01:19 AM

In my HTML editor's Firefox 2.0 preview (when I copy the code onto my hard drive), the HOME link, when it's hovered over, shifts down along with the left corner graphic. Am I missing some piece of the CSS? The problem doesn't happen on this page when viewed in Firefox, so I must be doing something wrong.

Posted by SPB on 12/25, 12:24 AM

How can you center the menu on a page ?

Tryed <center></center>

But doesn't work.

Posted by nicolaas on 02/02, 09:05 AM

Hey, I'm new to this. Can anyone let me know where the CSS goes? In the head or body? And am I right that html goes in the body? Thanks!

Posted by guy on 04/15, 06:55 PM

Centering: Seems like we all have this problem and like everyone else can't seem to get it to center correctly. Tried <Center> </Center> doesn't work
Tried Align that doesn't work. If anything am i putting it in the wrong place, can someone shed some light as to where i need to put the <Center> to make it align the whole menu not just the words to be center.

Posted by David on 06/05, 10:51 AM

how to i put gaps in the menu...like if i wanted some links to be on the left part of the menu and some justified to the right side?

Posted by Jeff on 06/19, 04:48 PM

nice one..but its old now

Posted by Yash on 06/28, 04:19 AM

I can't get this to work. Where do I need to upload the images to? Can I view this and put it together not online? like in a user folder?

Posted by Jennifer on 07/05, 10:58 PM

http://titanikk.azbuz.com/index.jsphttp://titanikk.azbuz.com/index.jsphttp://titanikk.azbuz.com/index.jsphttp://titanikk.azbuz.com/index.jsphttp://titanikk.azbuz.com/index.jsphttp://titanikk.azbuz.com/index.jsphttp://titanikk.azbuz.com/index.jsphttp://titanikk.azbuz.com/index.jsphttp://titanikk.azbuz.com/index.jsphttp://titanikk.azbuz.com/index.jsphttp://titanikk.azbuz.com/index.jsphttp://titanikk.azbuz.com/index.jsphttp://titanikk.azbuz.com/index.jsp

Posted by zafer on 10/25, 08:13 AM

Comment Pages 3 of 4 pages < 1 2 3 4 >

Commenting is not available in this weblog entry.