Dynamic Drive CSS Library- CF Navigation Menu II

CSS Library

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

Advertise Here

CSS Library: Horizontal CSS Menus: Here

CF Navigation Menu II

Author: Dynamic Drive

This is an inverted version of the original CF Navigation Menu. 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. The name "CF" is taken after our partner site CodingForums.com, which at the time of writing uses a menu based on this code.

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

Demo:

The four images used:

The CSS:

<style type="text/css">

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

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

* html #cfnavbar ul{ /*IE only rule. Add extra margin-bottom*/
margin-bottom: 1em;
}

#cfnavbar ul li{
display: inline;
}


#cfnavbar ul li a, #cfnavbar ul li span{
float: left;
color: black;
font-weight: bold;
padding: 7px 13px 8px 6px;
text-decoration: none;
background: url(media/dividerpink.gif) bottom 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/leftcornerpink.gif) bottom left no-repeat;
}

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

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

</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</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>

<br style="clear: left" />

Code Info

Rate this code:

Date Posted: 05/07/2006

Revision History: None

Usage Terms: Click here

Your Comments (15)

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 2 pages 1 2 >

Hellor to dynamic drive staffs,
take my best regards and hellos this site is the world best site, i love it
and please if you can add more and more horizental menus.
good bye
love to dynamic drive

Posted by Abdulllah on 05/10, 12:00 AM

first item distorts on ff1.0.7 when mouse hovers over it

Posted by twig* on 05/10, 03:58 AM

بيع اجهزه / صيانه / دورات /

Posted by hany on 05/16, 04:04 AM

How do i use this HTML code as i tried inseting it ontpo frontpage but it didnt work???
could some one go throuhg it in steps so i know exactly what i need to do
THANKS IN ADVANCE

Posted by P on 06/13, 10:09 AM

A work of beauty. I like how it's similar to the other one, only flipped and the colors are changed. Very clever.

* I recommend this with different colors.

Posted by Nathan on 06/16, 05:06 PM

P: Simple solution is do not use MS Frontpage. Particularly, Frontpage is evil!!!

Posted by Frodo on 06/19, 10:52 AM

Hello.
I can use your script.
Very Vell
Thanks

Posted by Ali YANAR on 11/16, 12:02 AM

Cool, but how can I make it so that I can make the menu centered.

Posted by Anthony on 11/27, 08:14 PM

thanks but we want the other colors..

Posted by gazete gazeteler on 02/05, 10:46 AM

Just play with the color parameter. For example: color: black; Or, change the image..

Posted by Özel Ders Kurs on 04/17, 02:43 PM

Comment Pages 1 of 2 pages 1 2 >

Commenting is not available in this weblog entry.