Créer un menu animé en CSS

Ce tutoriel est la traduction la plus fidèle possible du tutoriel original de Paul Underwood, Create An Animated CSS Box Menu.

Dans cet article nous allons utiliser les transitions CSS pour créer un nouveau style de menu. Le but à atteindre est d'avoir plusieurs « boites » de navigation et lorsque l'on passera sur l'une d'elles avec la souris la boite en question grossira et les autres rétréciront, ce qui aura pour effet de la mettre en avant. On pourra également ajouter des icônes qui représenteront la page cible de chaque boite de menu.

En premier lieu nous allons commencer par écrire le code HTML pour notre menu. Nous allons créer un élément div pour chaque boite et lui associer un texte ainsi qu'une image.

<div class="nav">
<div class="box home">
    <a href="#home">HOME
    <span><img src="./images/home.png" alt="" /></span></a>
     </div>
<div class="box about">
    <a href="#about">ABOUT
    <span><img src="./images/person.png" alt="" /></span></a>
      </div>
<div class="box portfolio">
    <a href="#portfolio">PORTFOLIO
    <span><img src="./images/folder.png" alt="" /></span></a>
      </div>
<div class="box services">
    <a href="#services">SERVICES
    <span><img src="./images/screw-driver.png" alt="" /></span></a>
     </div>
<div class="box contact">
    <a href="#contact">CONTACT
    <span><img src="./images/mail-back.png" alt="" /></span></a>
     </div>
</div>

Le code CSS va nous fournir toutes les fonctionnalités nécessaires pour ajouter du style à notre menu. Nous allons débuter par ajouter du style pour chacune des boites, on définit une hauteur et une largeur que l'on souhaite aux boites afin de remplir l'espace disponible. On ajoute également un display : inline-block afin de les afficher côte à côte plutôt que l'une en dessous de l'autre.

Comme nous allons également afficher une icône (qui sera animée) nous voulons nous assurer que rien ne viendra masquer notre contenu en utilisant la propriété overflow : hidden.

Enfin nous pouvons ajouter la transition pour la largeur de la boite de manière à modifier cette largeur au survol de la souris.

.box
{
    display: inline-block;
        float:left;
    height:200px;
    overflow: hidden;
    width:20%;
    -webkit-transition: width 1s;
    -moz-transition: width 1s;
        transition: width 1s;
}

Nous pouvons maintenant ajouter une couleur d'arrière-plan à nos boites de menu.

.box.home      { background-color: #2d89ef; }
.box.about     { background-color: #00a300; }
.box.portfolio { background-color: #e3a21a; }
.box.services  { background-color: #9f00a7; }
.box.contact   { background-color: #ee1111; }

Comme nous voulons que toute la zone des boites soit cliquable nous devons modifier l'ancre qui sert de lien pour la transformer en élément de type block en utilisant la propriété display : block et en définissant une hauteur de 100 %.

.box a
{
    color:#FFF;
    text-decoration: none;
    text-align: center;
    vertical-align: middle;
    height:100%;
    display:block;
        padding-top: 20px;
}

Nous voulons également ajouter une icône animée qui s'affichera aussi au survol de la souris. Nous allons une fois de plus utiliser les transitions CSS pour modifier la propriété top de l'élément span à l'intérieur duquel sera stockée une image que nous utiliserons comme icône. Au début nous avons besoin de déplacer l'image en dehors de l'élément ce qui aura pour effet de la masquer puisque nous avons défini un overflow : hidden. Puis nous pouvons utiliser la propriété position : relative avec un top défini à 100 % pour déplacer l'élément span en dehors.

Ajouter une transition sur la propriété top va animer l'icône et la déplacer à l'intérieur de la boite de menu qui sera survolée par la souris.

.box span
{
    display:block;
    position:relative;
    top:100%;
    text-align: center;
    -webkit-transition: top 1s;
    -moz-transition: top 1s;
    transition: top 1s;
}

Créer l'événement qui va se déclencher au survol de la souris va nous permettre trois choses :

• tout d'abord toutes les boites de menu vont se réduire jusqu'à 10 % ;
• la boite survolée par le curseur de la souris va s'agrandir jusqu'à une largeur de 60 % ;
• puis nous modifions la valeur de la propriété top de l'élément span contenu dans la boite de menu, ce qui va avoir pour incidence de le faire apparaître et ainsi afficher l'icône.

.nav:hover .box { width:10%; }
.nav .box:hover { width: 60%; }
.box:hover span{ top:25%; }

Dans cet article nous avons vu comment créer de manière très simple un menu animé agréable pour un utilisateur. Nous avons pour cela utilisé les transitions CSS. Vous pouvez bien sûr choisir vos propres couleurs d'arrière-plan, taille de boite de menu, etc. N'hésitez pas à le personnaliser !

Vous pouvez consulter la démonstration pour avoir un aperçu du rendu dans un navigateur.

Je tiens à remercier Paul Underwood de m'avoir autorisé à traduire son tutoriel.
Je remercie également ClaudeLELOUP pour sa relecture orthographique.