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

more tahanks....

Posted by senfore on 04/09, 02:17 PM

3DS MAX KURSU, AUTOCAD KURSU, GRAFIKERLIK KURSU, WEB TASARIM KURSU, WEB YAZILIM, SAP2000, STA4 CAD, KURSU, XSTEEL, CATIA, SOLIDWORKS, 3D MAX, KURSU, STACAD KURSU, CAD CAM, KURSU, ARCHICAD, REVIT, KURSLARI, WEB PROGRAMLAMA DERSİ MİMTEK DERSHANESİ

Posted by AKSAN on 04/30, 10:58 AM

WEBTASARIM KURSU WEBTASARIM EĞİTİMİ WEBTASARIM KURSLARI WEBTASARIM EĞİTİMLERİ VERİYORUZ

Posted by aksan1 on 04/30, 11:00 AM

Thanks for information. İlove thisseo site.
seo

Posted by web tasarım on 05/21, 11:45 AM

This is a wonderful navigation bar... Thanks

http://www.thinkflick.com/freebies/apple-mac-style-image-gallery/

Posted by Wpdigger on 06/02, 10:45 PM

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

Commenting is not available in this weblog entry.