Nouvelle semaine, nouveau gloubi-tuto. Cette fois-ci, on s’attaque à un autre script de menu. M’enfin script… pas cette-fois. Même si sur gloubiweb cela est présenté comme un script, il s’agit en fait de CSS.

Ce menu, qui est visible sur cette page, utilise la technique des sprites CSS.

Présentation de la technique des sprites

Cette technique consiste à ne montrer qu’une petite partie d’une image plus grande, qui contient plusieurs éléments graphiques de notre mise en page, dans notre cas, tous les états des boutons de notre menu.

Pour ne montrer qu’une partie de cette image plusieurs techniques sont possibles : image dans un conteneur plus petit qui masque tout ce qui est en dehors (propriété overflow : hidden) ou encore l’utilisation de la grande image comme image de fond d’un conteneur plus petit, positionnée de manière à ne laisser voir que la partie qui nous intéresse.

C’est cette deuxième technique qui utilisée ici, en modifiant la position de l’image de fond au survol de la souris.

Le fait que l’image de fond change de position au survol de la souris est visible sur la page originale, car les liens sont légèrement surdimensionnés et laissent voir plus qu’un seul et unique « bouton ».

Le code

Le menu est organisé de manière plutôt classique, en utilisant une liste non ordonnée dont on masque les marqueurs.

<div id="myMenu">
    <ul>
        <li><a id="a" href="#">A</a></li>
        <li><a id="b" href="#">B</a></li>
        <li><a id="c" href="#">C</a></li>
        <li><a id="d" href="#">D</a></li>
    </ul>
</div>

<style type="text/css">
    #myMenu > ul > li {
        list-style-type: none;
    }
</style>

Ensuite, chacun des liens est stylisé de manière à être affiché en mode bloc, dont la taille correspond à celle d’un bouton de l’image, avec le texte centré.

#myMenu > ul > li > a {
    display:block;
    text-align: center;
    padding: 8px 0 0 8px;
    width: 192px;
    height: 24px;
    background-image: url('assets/files/img/gloubi/menuours.gif');
    text-decoration: none;
    color: #000;
}

Le changement de la partie de l’image de fond à afficher est géré grâce à la pseudo-classe :hover.

#myMenu > ul > li > a:hover {
    background-position-y: -32px;
}

Pour afficher les liens sur la même ligne, différentes méthodes sont possibles. Une de ces méthodes est les grilles CSS. Pour une grille de 4 colonnes d’une largeur de 200px (largeur de nos boutons) et une séparation de 8px entre chacune des ces colonnes, le CSS est le suivant :

#myMenu > ul {
    display: grid;
    grid-template-columns: repeat(4, 200px);
    gap: 8px;
}

L’assemblage final des différents bouts de code présentés ci-dessus donne ce résultat.

J’espère encore vous avoir appris quelque chose ou alors que ma présentation vous ai permis de vous débloquer.

Je vous dis à bientôt pour de nouvelles aventures codesques.