Présentation▲
Vous pouvez déjà télécharger l'archive ou voir une démonstration en ligne.
Commençons par une description (en image) des différents éléments :
Le CSS▲
On commence par le fichier CSS. On utilise les directives de type transition pour effectuer l'animation de la liste des abonnements disponibles. Cette animation durera 1/2 seconde avec un effet ease-in-out (accélération puis ralentissement) ; elle est composée de deux effets :
- un effet de couleur (fondu) que l'on configure avec l'opacité de l'objet (opacity) ;
- un effet de translation de la div #subscribe-list de 50px du haut vers le bas lors d'un roll-over.
#subscribe-button {
float: right;
opacity: 0.2;
position: relative;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.subscribe-logo {
position: absolute;
right: 0px;
}
.subscribe-count {
position: absolute;
font-size: 12px;
text-shadow: 0px 2px 3px #bbb;
top: 66px;
right: 4px;
}
.subscribe-list {
position: absolute;
opacity: 0;
font-size: 12px;
top: 5px;
right: 32px;
-webkit-transform: translateY(-50px);
-moz-transform: translateY(-50px);
-o-transform: translateY(-50px);
transform: translateY(-50px);
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.subscribe-list li {
padding: 0px 10px 10px;
text-align: right;
list-style: none;
}
.subscribe-list li a, .subscribe-list li a:visited {
color: orange;
text-decoration: none;
font-weight: bold;
}
.subscribe-list li a:hover {
text-decoration: underline;
}
#subscribe-button:hover {
opacity: 1.0;
}
#subscribe-button:hover .subscribe-list {
opacity: 1.0;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}Le HTML▲
Il ne reste plus qu'à placer l'objet (de type span) dans la page HTML. Il est bien sûr possible d'adapter la liste à vos besoins.
<span id="subscribe-button">
<span><a href="#"><img src="img/ars-grafik-rss-icon-32.png"/></a></span>
<span>4200</span>
<div class="subscribe-list">
<ul>
<li><a href="#">RSS</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Facebook</a></li>
<li><a href="#">Mailing</a></li>
</ul>
</div>
</span>On voit donc toutes la puissance de CSS3 à qui il ne manque qu'une normalisation finale.
Remerciements▲
Vous pouvez télécharger l'archive ou voir une démonstration en ligne.
Nous tenons à remercier _Max_ pour sa relecture attentive de cet article.
