Menu fixe avec un effet de slide en CSS3

Ce tutoriel est la traduction la plus fidèle possible du tutoriel original de Paul Underwood, How To Create A CSS Slide Out Fixed Navigation.

Aujourd'hui nous allons apprendre comment rendre la navigation de vos utilisateurs plus facile en créant un menu fixe toujours visible. Mais pour que ce menu ne gène pas le contenu de chaque page, on masquera la moitié des images utilisées pour le menu. Les images ne s'afficheront entières qu'au survol de la souris.

Pour commencer, nous allons écrire le code HTML nécessaire à la navigation en utilisant le tag <ul> pour créer une liste.

<ul class="nav">
<li><a href="#home">
                <img src="./images/home.png" />
        </a></li>
<li><a href="#about">
                <img src="./images/about.png" />
        </a></li>
<li><a href="#portfolio">
                <img src="./images/portfolio.png" />
        </a></li>
<li><a href="#blog">
                <img src="./images/blog.png" />
        </a></li>
<li><a href="#services">
                <img src="./images/services.png" />
        </a></li>
<li><a href="#contact">
                <img src="./images/contact.png" />
        </a></li>
</ul>

Chaque item de la liste contient un lien (tag <a>) et chaque lien contient une image. Comme l'exemple ne porte que sur une seule page, les différents liens sont des ancres qui renvoient vers des id d'éléments sur la même page.

La partie la plus importante de cet article concerne le code CSS car il va nous permettre de fixer le menu ainsi que de lui appliquer le style voulu.

Tout d'abord nous allons écrire le code qui permettra de créer la barre de navigation fixe en utilisant la classe CSS nav.

ul.nav{
        list-style:none;
        padding:0;
        margin:0;
        position:fixed;
        left:-30px;
        top:140px;
}

Ce code permet de ne pas utiliser le style des listes par défaut (puces) et de fixer le menu sur le côté gauche de la page à 140px du haut de cette dernière.

Comme on peut le voir, on a placé le menu à -30px du bord gauche de la page, de façon à masquer la moitié des images utilisées pour le menu. En faisant cela, on s'assure que le menu ne viendra pas recouvrir le contenu de nos pages.

Un peu plus loin dans cet article nous verrons comment afficher le menu avec un effet de slide grâce aux transitions CSS.

Ensuite nous allons créer les items du menu ; nous avons déjà les images qui sont insérées dans le code HTML, il ne nous reste plus qu'à appliquer un style aux boites.

li{
        height:50px;
        width:50px;
        background: #7d7e7d; /* Old browsers */
background: -moz-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* IE10+ */
background: linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */
padding:10px;
position:relative;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}

Le point important de ce code CSS est la position : relative; appliquée à nos items. En effet, c'est grâce à cette propriété que nous pourrons par la suite changer la position de nos éléments au survol de la souris.

Maintenant que nous avons créé les items de notre liste, nous pouvons écrire le code CSS qui va nous permettre de faire glisser nos images (effet de slide) au survol de la souris.

li:hover {
    left:30px;
    transition: left 0.3s linear;
    -webkit-transition: left 0.3s linear;
    -moz-transition: left 0.3s linear;
}

Au survol de la souris, la position des items va changer pour se déplacer de 30px vers la droite et ainsi afficher nos images entières. Le point important dans ce code est la propriété transition qui va nous permettre de faire glisser nos éléments au lieu de seulement changer la position.

La propriété transition vous permet d'ajouter des effets à vos pages sans avoir besoin d'utiliser le JavaScript. Elle a besoin de trois paramètres : le premier est la propriété CSS concernée par l'effet de transition, le deuxième est la durée de l'effet et le dernier la façon dont l'effet s'applique. Dans notre exemple nous utilisons un effet linear ce qui signifie que la transition va s'effectuer avec la même vitesse du début à la fin.

Nous avons vu dans ce tutoriel comment créer un menu de navigation toujours visible avec un effet de slide au survol de la souris. Ce menu est très agréable visuellement pour vos utilisateurs. N'hésitez pas à créer vos propres effets grâce à la propriété transition !

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

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