Effet d’animation CSS3 sur menu vertical

On m’a demandé une vingtaine de fois comment reproduire l’effet d’animation assez simple de mes menus sur la barre latérale de ce blog (si le design actuel est toujours le même d’ici à ce que vous lisiez cet article). Du coup je prends un peu de temps pour vous faire un mini tutoriel et vous expliquer le principe !

Démonstration

La base HTML du menu

À quelques variations près, votre menu va certainement ressembler à cela au niveau du code HTML :

<ul class="menu-vertical">
    <li class="mv-item"><a href="#">Lorem ipsum</a></li>
    <li class="mv-item"><a href="#">Dolor Sit</a></li>
    <li class="mv-item"><a href="#">Amet consectetur</a></li>
    <li class="mv-item"><a href="#">Adipiscing elit</a></li>
</ul>

Il s’agit d’une bête liste de liens. À vous de voir s’il convient de la placer en plus dans un élément HTML5 nav ou pas.
Les classes sont à adapter selon votre projet et votre nomenclature, bien entendu.

Un exemple de CSS

Il va donc falloir supprimer les styles de base d’une liste, et animer les changements de propriété grâce à transition.
Je mets des commentaires dans le code pour vous faciliter sa compréhension.

/* style du bloc ul */
.menu-vertical {
  width: 250px; /* optionnel, c'est pour la démo */
  list-style: none; /* supprime les puces de liste */
  padding: 4px; /* on fait un peu de place autour des liens */
  margin: 0; /* on annule les marges */
  background: #F2F2F2;
}
 
/* styles des liens et éléments de liste */
.mv-item,
.mv-item a {
  /* les liens et item deviennent des blocs */
  /* suffit théoriquement à virer les puces de liste */
  display: block;
}
 
/* styles des liens */
.mv-item a {
  margin: 1px 0; /* espace les liens d'1 px */
  padding: 8px 20px; /* marges internes pour aérer */ 
  color: #666;
  background: #FFF;
  text-decoration: none; /* on vire le soulignement */

  /* on définit la transition pour les navigateurs */
  -webkit-transition: all .3s; /* Chrome/Safari */
  -moz-transition: all .3s; /* Firefox (plus trop nécessaire) */
  transition: all .3s; /* syntaxe officielle */
}
 
/* styles changeants au survol et focus */
.mv-item a:hover,
.mv-item a:focus {
  background: #1ABC9C;
  color: #FFF;
  padding-left: 30px; /* décalage du contenu de 10px vers la droite (30-20 = 10) */
}

Grosso-modo le code force une largeur globale du menu, mais votre conteneur fera peut-être déjà le travail, vous pouvez donc supprimer cette ligne width: 250px; si vous placez le menu dans une barre latérale dimensionnée.

Démonstration

Notez bien que les liens n’ont pas de largeur définie, du coup la marge intérieure changeante ne provoque pas de redimensionnement complet de l’élément. Si jamais vous avez donné un width à vos liens, il faudra peut-être envisager d’utiliser le code suivant sur vos liens :

/* changement du type de boîte */
.mv-item a {
  -webkit-box-sizing: padding-box;
  -moz-box-sizing: padding-box;
  box-sizing: padding-box;
}

La valeur border-box peut-être envisagée si vous utilisez en plus une bordure sur vos liens.

Amusez-vous bien !