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

Hi..
Im new on HTML AND CSS,
i have safe the images which was above. and now im using the dreamweaver to edit them 2gether, now when i extend the bg.gif and want to write something it disapear. any idea what have i done.

Posted by Bhavesh on 06/05, 06:57 AM

Very Nice Menu, i have one Queries, How do i put the text on top of bg.gif?? any idea how can i do that.,

Posted by Nilesh on 06/05, 08:09 AM

Very nice but I have a margin below this menu, a space. Ho can I remove it please ? THANKS! :o)

Posted by Chuch on 06/12, 04:43 PM

how do i align this to the center? do i change all lefts to center? does any body know if so email me at admin@beej.cbvd.co.uk

Posted by Aaron on 06/19, 07:07 AM

Very nice, but how to center it? With <div align="center"> no way... :(

Posted by TiTTi on 06/29, 05:39 PM

this is aswome

Posted by nicole on 09/02, 03:37 PM

Just try <center>Text here</center>.

It's not XHTML compliant but it will do the trick.

Posted by Brandon on 09/06, 07:17 AM

Hi Dear
I have one question. All the coding is related to HTML. like we always have to insert the code in Head or after head etc. but what should I do if I am working in PHP...because PHP don't have Head Tag...Please let me know if you have some other script for PHP based websites....and if possible please send me the links....

This is really very great source of information. I really appreciate all of your outstanding work...Keep it up..

Ali

Posted by Ali on 10/03, 02:10 PM

Fantastic menu - thanks! How do I use this with a fixed with though? When I add width:800px to #cfnavbar ul, the right corner image still appears immediately after the last link. Any ideas?

Posted by Six Media on 10/17, 08:48 AM

goog

Posted by ronald on 11/02, 09:50 PM

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

Commenting is not available in this weblog entry.