La technique CSS du « Sliding door » appliquée à un menu Web 2.0 - PcKULT.NET

Avant de connaître cette technique, j'utilisais une image différente pour chaque bouton de ma barre de navigation. Il est évident que cela n'est pas très pratique et cela demande aussi un peu plus de CSS que la technique que je vais vous montrer ci-dessous. De plus, cette technique diminuera le temps de chargement de vos pages ainsi que la bande passante utilisée. Alors, voici comment utiliser cette technique, et ce, avec une seule image.

Les images utilisées

La technique du « sliding door »

Le concept de cette technique est l'utilisation d'une image de fond pour les boutons de votre menu. Nous utiliserons un  à l'intérieur d'un lien <a> afin de maintenir l'image de fond. C'est donc dire que la partie la plus importante, est la position de l'image de font « background-image position ».

Code HTML

<ul class="blue">
 <li><a href="#" title="Accueil">Accueil</a></li>
 <li><a href="#" title="Tutoriel">Tutoriel</a></li>
 <li><a href="#" title="Astuce">Astuce</a></li>
 <li><a href="#" title="Article">Article</a></li>
</ul>

Ajoutons maintenant le pour chaque lien afin d'accueillir l'image de fond.

<ul class="green">
 <li><a href="#" title="Accueil" class="current">Accueil</a></li>
 <li><a href="#" title="Tutoriel">Tutoriel</a></li>
 <li><a href="#" title="Astuce">Astuce</a></li>
 <li><a href="#" title="Articles">Articles</a></li>
</ul>

Le code CSS

Passons maintenant à la partie CSS de cette technique

<UL>

ul.blue {
    padding: 5px;
    margin: 10px 0;
    // Suppression des puces de la liste, car nous ne voulons par les voir
    // dans le menu.
    list-style: none;
    float: left;
}

<LI>

ul.blue li {
    float: left;
}

ul.blue li a {
    float: left;
    // Suppression du soulignement du lien
    text-decoration: none;
    color: #ccc;
    // La valeur 15px du padding, représente l'espace entre le bord
    // du bouton et le texte.
    padding: 4px 15px 0 0;
    // La valeur 8px de la marge, représente l'espace entre les boutons
    margin-right: 8px;
    font: 900 14px "Arial", Helvetica, sans-serif;
}

ul.blue li a span {
 float: left;
 padding-right: 15px;
 display: block;
 // Diminution de la marge du haut afin de compenser le padding-top de
 // 4px du lien <a>
 margin-top: -4px;
 height: 24px;
}

<HOVER>

ul.blue li a:hover, ul.blue li a.current {
    color: #0d5f83;
    background: url(images/blue.png) no-repeat top right;
}

ul.blue li a:hover span, ul.blue li a.current span {
    background: url(images/blue.png) no-repeat top left;
}

Voilà! Technique facile et utile! Vous devriez être en mesure de le faire vous même et de réutiliser votre code dans vos projets facilement.

Ajouter cette page à votre Digg-Like préféré