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

Excellent! Great work!!! car

Posted by shaid on 09/26, 01:24 PM

it is perfect...

Posted by Aras on 10/17, 11:05 AM

I customized this code but the halfmoon effect does not show up...

Posted by Aras on 10/17, 11:08 AM

Hello every one, I just placed my menu in this site I am building, but it does not want to work nicely. The dropdown is too low. Can any one figure it out, and let me know. I been at it for 2 days.

Posted by Karl on 11/01, 07:10 AM

its cool but i cant run on firefox....

Posted by Web Tasarım on 01/03, 05:32 AM

good job, nice menu.....

Posted by madeni yağ on 01/19, 03:22 PM

I just wanted to thank you for this great lovely site its so usefull. tnx again a world. keep rocking.

Posted by Leena on 03/03, 08:09 AM

interesting but thanks

Posted by cam filmi on 03/23, 09:09 AM

ehliyet sınav sonuçları

Posted by ehliyet sınav sonuçları on 08/22, 03:30 PM

GREAT menu! I have used this one on my personal website....thanks for your great service!

Posted by Rahul on 09/24, 01:48 AM

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

Commenting is not available in this weblog entry.