samedi 5 mai 2012

Apple css only menu (navigation bar)

I've seen lot of solutions to this menu over the Internet, and here is mine working under IE7+ as well as Firefox without using any images at all:
CSS:


.header_menu{
background-image:-moz-linear-gradient(100% 100% 90deg, #959595, #D0D0D0);
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#D0D0D0', EndColorStr='#959595');
color:#333333;
font-family:"Myriad Pro Light";
font-size:1.1em;
height:41px;
text-shadow:0 1px 0 #DFDFDF;
-moz-border-radius:5px;
border-radius: 5px;
}

ul.header_menu{
list-style-type:none;
}

ul.header_menu li{
display:block;
float:left;
padding-right:1em;
padding-left:1em;
font-weight:bold;
height:31px;
padding-top:0.7em;
border-right:1px #797979 solid;
cursor:pointer; cursor:hand;
}

ul.header_menu li:hover{
background-image:-moz-linear-gradient(100% 100% 90deg, #535353, #919191);
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#919191', EndColorStr='#535353');
color:#ffffff;
text-shadow:none;
}

HTML code:
<ul class="header_menu">
<li>» 1.Register</li>
<li>2 Login</li>
<li>3.Make money!</li>
</ul>

apple style css only menu
End result:

Cheers!

Aucun commentaire:

Enregistrer un commentaire