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

Awesome script! Just what I was looking for!!! THanks

Posted by Asaf on 02/22, 03:07 AM

I successfully customized this code; however, the halfmoon effect does not show up. I just get tabbed boxes. Help!

Posted by Shar on 03/23, 05:11 PM

Why is it necessary to style the list elements inline on each linked page to indicated the current page, rather than using CSS rule 'selected' in the external style sheet vis a vis, the 'Shaded Image Tabs menu' also listed on Dynamic Drive? (link is http://www.dynamicdrive.com/style/csslibrary/item/shade-image-tabs-menu/

Posted by GaryG on 04/05, 08:48 PM

its cool but i cant run on firefox

Posted by web tasarımı on 05/03, 06:58 PM

I like the Half Moon tab menu a lot but, one of the items in the html is coded: <li class="selected">. This makes me think that tab can be altered to indicate which page is currently selected. But, there's no matching css. Does anyone have that missing piece?

Thanks.

Posted by Dick on 05/13, 07:47 PM

Perfect !! Thanks

Posted by Andrew on 05/21, 06:52 PM

This menu rounds out a sharp corner and expands smoothly without breaking up...Thanks!

Posted by Googles Girl on 05/23, 07:28 PM

Brilliant script, I love to technique you use for the tab image, ie making it too long and using the div to crop it to the right length!!! Love the fact that you can centre it as well. Now got to figure out how to space them evenly across the container div so as they look good in 800x600 and 1024x768. Also want to look into adding a drop menu feature to it, there are many out there but i think yours is a good starting point to play around with. cheers!!!!

Posted by philip on 06/26, 01:33 AM

Posted by program on 09/01, 09:47 PM

very nice example and thanks.

Posted by ehliyet on 09/13, 04:53 AM

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

Commenting is not available in this weblog entry.