Dynamic Drive CSS Library- Half moon tab menu

CSS Library

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

Advertise Here

CSS Library: Horizontal CSS Menus: Here

Half moon tab menu

Author: Dynamic Drive

We named this CSS tab menu "Half Moon" based on its look. The menu uses a transparent background image for each tab item to create a right round edge. This transparency means you can modify the colors of the menu items (such as the hover color) just by changing CSS color values inside the style sheet. Easy alignment is also supported, so you can, for example, align the tabs center or right if desired. Nice!

Demo:

The single image:

The CSS:

<style type="text/css">

.halfmoon{
margin-bottom: 1em;
}

.halfmoon ul{
padding: 3px 9px 2px 5px;
margin-left: 0;
margin-top: 1px;
margin-bottom: 0;
font: bold 12px Verdana;
list-style-type: none;
text-align: left; /*set to left, center, or right to align the menu as desired*/
border-bottom: 1px solid #929492;
}

.halfmoon li{
display: inline;
margin: 0;
}

.halfmoon li a{
text-decoration: none;
padding: 3px 9px 2px 5px;
margin: 0;
margin-right: 1px; /*distance between each tab*/
border-left: 1px solid #DDD;
color: black;
font-size: 13px;
background: #ECEEEC url(media/tabright.gif) top right no-repeat;
}

.halfmoon li a:visited{
color: black;
}

.halfmoon li a:hover{
background-color: #CDDADA;
color: navy;
}

</style>

The HTML:

<div class="halfmoon">
<ul>
<li><a href="http://www.dynamicdrive.com">Home</a></li>
<li><a href="http://www.dynamicdrive.com/new.htm">DHTML</a></li>
<li class="selected"><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>
</ul>
</div>

Code Info

Rate this code:

Date Posted: 08/14/2006

Revision History: None

Usage Terms: Click here

Your Comments (45)

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

excelent menu!!!!

Posted by FHER on 08/15, 12:29 AM

Hi

I am using this menu in a two framed page. The top contains this menu. The bottom contains the content of the link in the menu. How can I make the last tab clicked be a different color to denote the current page.

Thanks alot!
Rey

Posted by rhang on 09/21, 10:47 AM

you have to overwrite the css class in case of the last tab you clicked with following code:

<li><a style ="background-color:#FFDADA" href ="http://....">Text</a></li>

Sorry for my bad english!

Posted by svenja on 09/30, 03:54 PM

I am trying to find a 2 framed page that has tabs in the top frame and when tab is clicked, the bottom frame is the only frame that refreshes. (goes to page of clicked tab). Any help??

Posted by Jory on 11/07, 02:26 PM

I can not use your free code!

Posted by cxgc on 11/09, 11:09 PM

I like this menu a lot, but how do I get the long menu link eg: <a>text
text</a> to wrap and keep the image in form...? Image breaks whenever <a> tag has a line break..

Posted by natty on 11/20, 03:34 PM

Works flawlessly, excellent work!

Posted by Claude Gelinas on 12/05, 01:11 AM

The code is awe-inspiring!

Posted by Beatbox on 12/22, 10:19 AM

This is a wonderful navigation bar i would definitly use this when ever i need another one!!!

Posted by historysbest on 01/02, 02:55 PM

I am trying to find a 2 framed page that has tabs in the top frame and when tab is clicked, the bottom frame is the only frame that refreshes. (goes to page of clicked tab). Any help??
Posted by Jory on 11/07, 12:26 PM

Response:
Hi Jory,
You would need to name the bottom frame (e.g., name="name") and then in the hyperlink, you would need to name it to that frame (e.g., target="name").
The bottom frame would point to it. If you want the entire page to point to it, insert this in the hyperlink html: target="_parent"

Posted by Josh on 01/25, 09:17 PM

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

Commenting is not available in this weblog entry.