Ces portes coulissantes base bleue teintée onglets "sauter" quand elle est sélectionnée, par exemple lorsque la souris survole chacune. Ceci est accompli en utilisant une combinaison de positionnement relatif et un rembourrage sur chaque onglet.
L'onglet sélectionné est d'abord étiré à la verticale, en lui donnant un rembourrage fond épais, puis arraché grâce à la valeur de la propriété CSS "top" qui est plus petit que les onglets normaux ». Le résultat sont des onglets qui animent sans aucun script.
BTW, le montant de l'onglet sélectionné sauter peut être facilement ajustée se référer aux commentaires à l'intérieur du CSS.
LE CODE CSS:
<style type="text/css">
.animatedtabs{
border-bottom: 1px solid gray;
overflow: hidden;
width: 100%;
font-size: 14px; /*font of menu text*/
}
.animatedtabs ul{
list-style-type: none;
margin: 0;
margin-left: 10px; /*offset of first tab relative to page left edge*/
padding: 0;
}
.animatedtabs li{
float: left;
margin: 0;
padding: 0;
}
.animatedtabs a{
float: left;
position: relative;
top: 5px; /* 1) Number of pixels to protrude up for selected tab. Should equal (3) MINUS (2) below */
background: url(media/tab-blue-left.gif) no-repeat left top;
margin: 0;
margin-right: 3px; /*Spacing between each tab*/
padding: 0 0 0 9px;
text-decoration: none;
}
.animatedtabs a span{
float: left;
position: relative;
display: block;
background: url(media/tab-blue-right.gif) no-repeat right top;
padding: 5px 14px 3px 5px; /* 2) Padding within each tab. The 3rd value, or 3px, should equal (1) MINUS (3) */
font-weight: bold;
color: black;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
.animatedtabs a span {float:none;}
/* End IE5-Mac hack */
.animatedtabs .selected a{
background-position: 0 -125px;
top: 0;
}
.animatedtabs .selected a span{
background-position: 100% -125px;
color: black;
padding-bottom: 8px; /* 3) Bottom padding of selected tab. Should equal (1) PLUS (2) above */
top: 0;
}
.animatedtabs a:hover{
background-position: 0% -125px;
top: 0;
}
.animatedtabs a:hover span{
background-position: 100% -125px;
padding-bottom: 8px; /* 3) Bottom padding of selected tab. Should equal (1) PLUS (2) above */
top: 0;
}
</style>
-----------------------------------------------------------------------------------------------------
<div class="animatedtabs">
<ul>
<li><a href="votre lien ici" title="Home"><span>Home</span></a></li>
<li class="selected"><a href="votre lien ici"><span>CSS</span></a></li>
<li><a href="votre lien ici" title="New"><span>New</span></a></li>
<li><a href="http://votre lien ici" title="Revised"><span>Revised</span></a></li>
<li><a href="votre lien ici" title="Tools"><span>Tools</span></a></li>
<li><a href="votre lien ici/" title="DHTML Forums"><span>Forums</span></a></li>
</ul>
</div>
-----------------------------------------------------------------------------------------------------
0 commentaires:
Enregistrer un commentaire