Menu fixe avec un effet de slide en CSS3

Pour avoir une navigation simple et fluide

Paul Underwood

Traducteur

Sébastien Germez

Dans ce tutoriel nous allons voir comment créer un menu de navigation toujours visible avec un effet de slide au passage de la souris.

Commentez

- Titre : Menu fixe avec un effet de slide en CSS3

- Auteur : Paul Underwood

- Traducteur : Sébastien Germez

- Parution : 4 octobre 2012

- Public visé :

- Licence : Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright ®  Paul Underwood. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

Sommaire

- I. Traduction

- II. Introduction

- III. Le code HTML

- IV. Le code CSS

- V. Conclusion

- VI. Liens

- VII. Remerciements

I - Traduction

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.

II - Introduction

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.

III - Le code HTML

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.

IV - Le code CSS

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.

V - Conclusion

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 !

VI - Liens

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

VII - Remerciements

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