Blog iamvdo.me
Dans cet exemple, on utilise la fonction CSS3 rgba(R,V,B,Alpha) afin de gérer l’opacité d’un élément. Contrairement à opacity qui rend transparent un élément avec tous ses enfants, rgba() rend transparente la couleur utilisée. La valeur RVB est donc appliquée avec sa valeur d’opacité.
Utilisation également du pseudo-élément ::after pour ajouter le caractère « > » si un menu déroulant existe et transformation CSS de ce caractère pour visuellement informer l’internaute de la position du sous-menu.
ul li a::after{
content: ">";
position: absolute;
right: 5px;
transform: rotate(270deg);
}L’utilisation du pseudo-élément permet de s’affranchir de l’utilisation d’élément HTML supplémentaire, de classe (x)HTML, ou d’images CSS.
#1par Belo, le 23 novembre 2011
L’effet n’est pas compliqué et il rend super bien ! merci
#2par Hodonou Sounton, le 7 juin 2012
Super !
#3par Alain, le 6 décembre 2012
Je passe sur ce site très intéressant, avec Firefox 17.01 et IE 9.0.8112, et l’exemple du menu ci-dessus fonctionne biens, alors qu’il n’est pas référencé ? Etrange, non ?
#4par Vayel, le 21 janvier 2013
Effet agréable au regard. ^^
Par contre, problème d’accessibilité : le menu ne se déroule pas quand on passe le focus.
#5par css3create, le 25 janvier 2013
@Vayel : exact ! Il faudrait que je mette cette démo à jour... :) Et d’autres aussi d’ailleurs.