Vista Aero boutons de menu

Vista Aero boutons de menu

Ce menu se compose d'une rangée de Aero Vista indépendante, en regardant les boutons CSS, et s'écarte de la structure des menus typiques à base de la liste. Chaque bouton apparaît initialement disparu à peu via CSS opacité, puis ramenés à une opacité complète pendant le "hover" de l'Etat. La mise en garde pour ce menu est la hauteur fixe de chaque bouton basé sur l'interface graphique, n'est donc pas idéal si la taille de police des boutons »est modifié de la valeur par défaut.

.LE CODE CSS

<style type="text/css">




.aerobuttonmenu{ /*container that holds a row of aero buttons*/
overflow: hidden; /*See: http://www.quirksmode.org/css/clearing.html */
width: auto;
background: #F7F7F7; /*menu strip background*/
border: 1px solid gray;
padding: 4px 0;
border-width: 1px 0;
}


* html .aerobuttonmenu{ /*IE6 and below hack. Set explicit strip width*/
width: 100%;
}


.aerobuttonmenu a.aero{ /*aero button CSS*/
background: transparent url('media/aeroleft.gif') no-repeat top left;
display: block;
float: left;
font: bold 13px Verdana, Trebuchet MS; /* Change 13px as desired */
line-height: 23px; /* This value + 8px should equal height of button background (default is 31px) */
height: 31px; /* Height of button background height */
padding-left: 10px; /* Width of left menu image */
text-decoration: none;
margin-right: 5px; /*spacing between buttons*/
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90); /*this and next two rules control opacity of buttons before hover*/
opacity: 0.9;
-moz-opacity: 0.9;
}


.aerobuttonmenu a.aero:link, .aerobuttonmenu a.aero:visited, .aerobuttonmenu a:active{
color: white; /*button text color*/
}


.aerobuttonmenu a.aero span{
background: transparent url('media/aeroright.gif') no-repeat top right;
display: block;
padding: 4px 10px 6px 0; /*Set 10px here to match value of 'padding-left' value above*/
}


.aerobuttonmenu a.aero:hover{ /* Hover state CSS */
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100); /*this and next two rules control opacity of buttons during hover*/
opacity: 1;
-moz-opacity: 0.99;
}


.aerobuttonmenu a.aero:hover span{ /* Hover state CSS (for text) */
color: yellow;
}


.black a.aero{
background-image: url('media/aeroleftblack.gif');
}


.black a.aero span{
background-image: url('media/aerorightblack.gif');
}


.aerobuttonmenu .rightsection{
float: right;
width: 100px;
position: relative;
top: 3px;
padding-right: 5px;
text-align: right;
}


.aerobuttonmenu .rightsection a{
color: navy;
}


</style>

LE CODE html

<h4>Aero Blue and Black Button Menus:</h4>

<div class="aerobuttonmenu">

<div class="rightsection">

<a href="#"><img src="http://i31.tinypic.com/33mpnon.png" border="0" alt="search" /></a>

</div>

<a href="votre lien ici" class="aero"><span>Home</span></a> 

<a href="votre lien ici" class="aero"><span>CSS Examples</span></a>

<a href="votre lien ici" class="aero"><span>Forums</span></a> 

<a href="votre lien ici" class="aero"><span>Webmaster Tools</span></a> 

<a href="votre lien ici" class="aero"><span>JavaScript</span></a> 

<a href="votre lien ici" class="aero"><span>Gallery</span></a>

</div>

<br />

<div class="aerobuttonmenu black">

<div class="rightsection">

<a href="#"><img src="http://i31.tinypic.com/33mpnon.png" border="0" alt="search" /></a>

</div>

<a href="votre lien ici" class="aero"><span>Home</span></a>

<a href="votre lien ici" class="aero"><span>CSS Examples</span></a>

<a href="votre lien ici" class="aero"><span>Forums</span></a>

<a href="votre lien ici" class="aero"><span>Webmaster Tools</span></a> 

<a href="votre lien ici" class="aero"><span>JavaScript</span></a>

<a href="votre lien ici" class="aero"><span>Gallery</span></a>

</div>

Posted in: blogger html css menu horizontale