Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library
 
CSS Library

Advertise Here

CSS Layouts
Web Graphics
Online Tools:

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:

The HTML:

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
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
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.
Copyright 2006-2014 Dynamic Drive Read our Usage Terms before using any of the CSS codes.