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:
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 4 of 4 pages « First < 2 3 4
I like this menu, but what if i wanted the background color to change on rollover? How would i deal with the first and last tab that have the rounded corner?
What is the easiest way to replace the 4 image files with one with different color? Thanks.
Apparently a lot of people are having aproblem with centering the ENTIRE menu, not just the text. Div centering doesn't work. html centers don't work.
I personally am ripping m y hair out. Can someone shed a little light, help us out!
I personally am ripping m y hair out. Can someone shed a little light, help us out!
I use this Navi in another div.
How can I make it that the Navi has the same width like the div, which has the navi as a contens?
Thanks
How can I make it that the Navi has the same width like the div, which has the navi as a contens?
Thanks
<style type="text/css">
<!--
body{
font: 76%/1.8 "Lucida Grande",Verdana, Arial, Helvetica, sans-serif;
background: #fff;
}
ul{
background: url(bg.gif) repeat-x;
padding: 0;
margin: 0;
float: left;
font: bold 80% Verdana;
}
ul li{
float: left;
background:url(rightcorner.gif) no-repeat top right;
}
li a{
padding: 02em;
line-height: 1px;
background: url(leftcorner.gif) no-repeat top left;
text-decoration: none;
color:#000000;
float: left;
display: block;
}
ul a:hover{
color: #999999;
font-size: 13px;
}
-->
</style>
</head>
<body>
<ul id="mainNav">
<li class="first">
<li>Home</li>
<li>About</li>
<li>News</li>
<li>Product</li>
<li>Contact</li>
<li>Clients</li>
</ul>
</body>
</html>
try this code it works
<!--
body{
font: 76%/1.8 "Lucida Grande",Verdana, Arial, Helvetica, sans-serif;
background: #fff;
}
ul{
background: url(bg.gif) repeat-x;
padding: 0;
margin: 0;
float: left;
font: bold 80% Verdana;
}
ul li{
float: left;
background:url(rightcorner.gif) no-repeat top right;
}
li a{
padding: 02em;
line-height: 1px;
background: url(leftcorner.gif) no-repeat top left;
text-decoration: none;
color:#000000;
float: left;
display: block;
}
ul a:hover{
color: #999999;
font-size: 13px;
}
-->
</style>
</head>
<body>
<ul id="mainNav">
<li class="first">
<li>Home</li>
<li>About</li>
<li>News</li>
<li>Product</li>
<li>Contact</li>
<li>Clients</li>
</ul>
</body>
</html>
try this code it works
Hiiii
U did a great work.
Now my que. is in navigation menu if i clicked on home menu then home should be highlighted with some color or underline and then if i clicked on another menu let say DHTML menu then DHTML should be highlighted with some color or underline n at that time home should be in green color..
can u provide some cod for it..
thanx..
U did a great work.
Now my que. is in navigation menu if i clicked on home menu then home should be highlighted with some color or underline and then if i clicked on another menu let say DHTML menu then DHTML should be highlighted with some color or underline n at that time home should be in green color..
can u provide some cod for it..
thanx..
nice menu
thanks for the note. I LOVE THESE MENUS!!!
Commenting is not available in this weblog entry.
The code is like in Your example and without any other
VERY GOOD works!
Bye