Améliorez simplement vos menus avec CSS3 et les transitions

Personnaliser un menu en CSS3

Une méthode pour rendre un site plus attrayant est de le rendre dynamique visuellement.

Voyons dans cet article les quelques étapes pour rendre un menu plus sexy, facilement grâce à CSS3 et les transitions.

Un menu avec HTML et un peu de CSS

Posons déjà les bases de ce cas pratique.

Soit un menu (de retour en cours de maths ?) comportant quatre liens dans une liste :

Le code HTML correspondant :

<ul id="menu-demo">
    <li><a href="#">Accueil</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">A propos</a></li>
</ul>

Notez que ce code ne changera pas.

Il s’agit de notre menu de base, ne contenant que du texte. Toute la partie concernant la présentation sera gérée en CSS et ne polluera pas le texte contenu, c’est-à-dire la partie intéressante pour les robots des moteurs de recherche.

En clair, il est préférable d’éviter les balises de présentation d’HTML et de les remplacer par du CSS. Par exemple, préférez :

.red { color: red };
<p class="red">Texte</p>

à :

<p><font color="red">Texte</font></p>

Un peu de décoration pour aérer les entrées de la liste, ajouter de la couleur au texte et au fond, supprimer les puces et donner une largeur, en CSS2 (et donc compatible CSS3) :

#menu-demo li {
  list-style:none;
  padding: 16px;
  width: 25%;
  background-color: #f9f9f9;
}
#menu-demo li a {
  text-decoration: none; 
  color: #a0a0a0;
  font-weight: bold;
  padding: 0 40px;
}

Ce qui donne :

Rendre le menu plus dynamique

Une technique pour rendre notre menu un peu plus dynamique déjà disponible en CSS2 était d’utiliser le sélecteur :hover sur les liens du menus.

Par exemple, changeons le souligné et la couleur du lien au moment où le visiteur passe son curseur sur le menu :

#menu-demo li a:hover {
  text-decoration: underline;
  color: orange;
}

Le lien garde ses propriétés et ne change que celles qui sont définies ici.

Ajoutons également une couleur de fond, une icône au li contenant le lien et changeons sa largeur :

#menu-demo li:hover {
  background: #f0f0f0 url("star.png") no-repeat scroll left center;
  width: 27%;
}

Je préfère ajouter l’icône au li pour éviter de donner une hauteur supplémentaire au lien, qui pourrait empiéter sur le lien du dessus.

Le résultat :

Les transitions

Pour le moment, l’icône apparaît et disparaît sèchement. De la même façon la couleur de fond et la largeur du li sont modifiés instantanément au passage du curseur.

Avec CSS3, il est possible d’ajouter une transition entre les deux états, par exemple l’icône va apparaître progressivement.

Modifions la définition de li:hover :

#menu-demo li:hover {
  background: #f0f0f0 url("star.png") no-repeat scroll left center;
  width: 27%;
  transition: all 200ms;
  -webkit-transition: all 200ms;
}

Notez que pour le moment, il est nécessaire de dupliquer la ligne transition avec -webkit-transition pour la rendre compatible avec Safari.

Aussi, si vous avez l’habitude de ce genre d’effet JavaScript, vous pouvez constater que CSS3 fait tout aussi bien le travail.

Ce qui donne :

Il est également possible de n’utiliser la transition que sur une propriété particulière. Par exemple, si vous voulez que la transition ne se fasse que sur la largeur du li et plus sur la couleur du fond et l’apparition de l’icône, vous pouvez la définir ainsi :

#menu-demo li:hover {
  ...
  transition: width 200ms;
  -webkit-transition: width 200ms;
}

Ce qui donne :

Avec le même principe, vous pouvez définir une transition différente par propriété.

Enfin, vous pouvez constater que la transition n’est faite que dans un sens : lorsque vous retirer le curseur du li, l’icône disparaît brutalement, comme les autres changements.

Pour corriger ce point, tout se passe dans les propriétés du li (alors que nous avions défini la transition sur li:hover) :

#menu-demo li {
  ...
  transition: all 1000ms;
  -webkit-transition: all 1000ms;
}

Ce qui donne :

Remarquez qu’il est possible d’indiquer des durées différentes : la transition met deux centièmes de seconde pour apparaître, et une seconde complète pour disparaître.

Transitions non linéaires

Les transitions que nous avons vues sont linéaires, c’est-à-dire qu’elles ont la même vitesse du début de l’animation à la fin.

Vous pouvez aussi indiquer une accélération et une décélération pour donner un effet plus stylé. Il suffit d’ajouter un troisième paramètre à la transition. Par exemple :

#menu-demo li {
  ...
  transition: all 1000ms ease;
  -webkit-transition: all 1000ms ease;
}

Avec ease, la transition commence rapidement, décélère puis accélère sur la fin.

Les différents paramètres utilisables (linear, ease, ease-in, ease-out et ease-in-out) sont décrits sur la page du W3 Schools concernant la propriété CSS transition-timing-function (qui correspond au troisième paramètre de la propriété transition).

Si vous voulez aller plus loin et personnaliser le timing de l’accélération, vous pouvez utiliser cubic-bezier. D’ailleurs les plus connus sont disponibles sur easings.net, avec les paramètres pour cubic-bezier quand c’est possible.

Personnaliser un menu en CSS3 : Easings.net pour faire des transitions
Easings.net pour faire des transitions

Le résultat, avec dans l’ordre : une transition linear, ease, ease-in-out et enfin cubic-bezier(0.68, -0.55, 0.265, 1.55), c’est-à-dire easeInOutBack.

Les propriétés des différents li:hover sont impactés en utilisant un sélecteur particulier : nth-child.
Par exemple :

#menu-demo li:nth-child(1) {
  transition: all 1000ms linear; -webkit-transition: all 200ms linear;
}

Super transition (ça tombe bien, c’est un peu le thème de l’article)…

Les sélecteurs

Voyons une dernière astuce pour améliorer notre menu : les sélecteurs CSS.

Vous connaissez les sélecteurs permettant d’accéder à tous les éléments de la même classe (préfixés par un .) ou à ceux identifiés par un attribut id unique (préfixés par un #).

Ajoutons une double barre en bas de notre menu, grâce au sélecteur :last-child :

#menu-demo li:last-child {
  border-bottom: 2px double black;
}

Il est aussi possible de changer la couleur d’une ligne sur deux grâce à :nth-child(2n) :

#menu-demo li:nth-child(2n) {
  background-color: #f0f0f0;
}
#menu-demo li:nth-child(2n):hover {
  background-color: #d0d0d0;
}

Le résultat :

Les sélecteurs CSS sont des outils bien pratiques, qui permettent de faire beaucoup de choses dans modifier le contenu.

Le mot de la fin

Et voilà un menu qui ressemble à ce que nous pouvions trouver il y a quelques années en utilisant Flash. Le tout sans Flash et avec une quinzaine de définitions CSS seulement.

D’ailleurs, nous n’avons pas parlé de compatibilité : les versions de Firefox, Chrome et Safari actuelles, ainsi que Internet Explorer 10 sont compatibles avec tout ce que nous avons vu.

En revanche les versions antérieures à Internet Explorer 10 ne comprennent pas les transitions. Dans ce cas, les utilisateurs des navigateurs non compatibles verront les lignes du menu changer de couleur au moment du passage du curseur, ainsi que l’icône apparaître, le tout sans transition, comme à la fin du chapitre ‘Rendre le menu plus dynamique’. Tout simplement, mais il faut quand même y penser.

Cet article vous a été utile ? Partage it !

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Si vous le souhaitez, renseignez le champ 'Nom' de cette façon : 'VotreNom@VotreMotClef' pour obtenir une ancre optimisée pour les moteurs de recherche.