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

Great menu! I`m going to use it right now om my new website! Thanks!

Posted by Gaby on 09/29, 11:22 AM

aöf rehber sitesi

Posted by aöf on 10/06, 12:58 PM

interesting

Posted by Craciunescu Sorin on 11/26, 12:22 AM

good menu thanks

Posted by çanta imalat on 12/02, 03:28 AM

good subject thanks.

Posted by promosyon çanta on 12/02, 03:29 AM

yes ı hope

Posted by çanta on 12/02, 03:30 AM

Thanks for this examples and codes

Posted by http://www.exdizayn.com on 01/14, 10:38 AM

yes ı think so

Posted by promosyon çanta on 01/18, 03:44 PM

Thank you very much for this information.I like This site! Thanks!

Posted by parça kontör market on 03/13, 09:50 AM

very nice example and thanks. very good

Posted by web tasarımı on 04/09, 07:06 AM

Comment Pages 4 of 5 pages « First < 2 3 4 5 >

Commenting is not available in this weblog entry.