Menu CSS - Sliding doors (Horizontal)

Suite à une question de Smopuim concernant l'article Menu de navigation léger en CSS (3) et la possibilité de mettre une image en background, voici un nouveau lot de menu horizontaux avec la technique des «sliding doors» qui permet avec une seule image d'obtenir un effet hover du plus bel acabit.

Edit: Suite à la question de All sur cet artcile, vous trouverez une explication pour avoir ce menu sliding doors en mode vertical

Exemples

Menu 1 (ajustable):

• Lien 1
• Lien 2
• Lien 3
• Lien 4

Menu 2 (ajustable):

• Lien 1
• Lien 2
• Lien 3
• Lien 4

Menu 3 (ajustable):

• Lien 1
• Lien 2
• Lien 3
• Lien 4

Menu 4 (ajustable):

• Lien 1
• Lien 2
• Lien 3
• Lien 4

Menu 5 (fixe):

• Lien 1
• Lien 2

Menu 6 (fixe):

• Lien 1
• Lien 2

Menu 7 (fixe):

• Lien 1
• Lien 2

Technique

En fait le concept de «sliding doors» ou «portes coulissantes» est très simple, il est largement expliqué dans les liens que je cite dans le dernier paragraphe de cet article, toutefois on peut rapidement expliquer le principe comme suit:

On a, sur une seule image, l'image de l'état avant le passage de la souris superposée à l'image de l'état pendant le passage de la souris:

C'est cette image que l'on utilise en background des liens; en la calant sur la partie du haut pour les liens avant survol, et en la calant sur la partie du bas pour les liens pendant le survol. On tache évidement à faire en sorte que la hauteur du background affiché soit toujours celle de la moitié de l'image.

On comprend mieux l'utilisation de l'expression «portes coulissantes».

Code HTML à utilser

Le code HTML à utiliser (et à insérer en mode source) est le suivant:

HTML

<div id="nav">
    <ul>
        <li><a href="#nogo">Lien 1</a></li>
        <li><a href="#nogo">Lien 2</a></li>
        <li><a href="#nogo">Lien 3</a></li>
        <li><a href="#nogo">Lien 4</a></li>
    </ul>
</div>

Bien sûr, pensez à remplacer les #nogo par les urls vers lesquelles vos liens doivent pointer.

Codes CSS à utilser

2 possibilités s'offrent à vous: soit vous voulez des boutons de menu de largeur fixe, soit vous souhaitez des boutons qui s'adaptent à la taille du texte qu'ils contiennent.

Code CSS pour des boutons de largeur fixe

C'est ce code CSS que vous devez utiliser si vous souhaitez que tous les boutons aient la même taille (celle de votre background):

CSS

#nav li {
    margin: 0;
    padding: 0;
    display: inline;
}

#nav li a:link, #nav li a:visited {
    display: block;
    float: left;
    height: 32px;
    width: 200px;
    line-height: 32px;
    text-decoration: none;
    text-align: center;
    background:#fff url(nav.gif);
    padding: 0;
}

#nav li a:hover, #nav li a:active {
    background:#000 url(nav.gif) 0 -32px;
    padding: 0;
}

Vous devez renseigner la propriété height par la moitié de la hauteur de votre image. Dans tous les exemples de cet article, les images ont une hauteur de 64px, on mettra donc 32px.

C'est la même valeur que vous devez renseigner pour la propriété line-height, ainsi le texte des liens sera bien centré verticalement.

Pour la largeur des boutons, widh, vous devez saisir la largeur de votre image de fond. Dans mon exemple 200px.

Les propriétés text-decoration et text-align sont facultatives, elles permettent respectivement d'enlever le soulignement des liens et de centrer le texte des liens. Vous pouvez à loisir rajouter des propriétés liées au style de la police (font-family, font-size, font-weight, text-transform, ...)

Selon la feuille de style de votre blog/site, il est possible que vous ayez défini des couleurs de police précises pour les liens, couleurs qui ne correspondent pas aux couleurs souhaitées dans vos boutons. Pour les modifier, vous devez rajouter la propriété color avec la valeur souhaitée dans la partie adéquate: #nav1 li a:link, #nav1 li a:visited pour les liens avant survol et visités, et #nav1 li a:hover, #nav1 li a:active pour les liens au survol et actifs.

Pensez enfin à remplacer nav.gif par l'url de votre image de fond, et ce, dans les 2 appels à la propriété background. Dans le deuxième appel, les paramètres 0 -32px permettent d'afficher l'image de fond avec un décalage de 32px vers le haut, c'est l'effet «portes coulissantes». Vous l'aurez compris, -32px correspond à la moitié de la hauteur de votre image. Le signe négatif est important!

Notez que pour la propriété background, il est important en premier paramètre de mettre une couleur de fond. Dans l'exemple, j'ai mis #fff (blanc) pour le premier appel de la propriété et #000 (noir) pour le deuxième appel. Ces couleurs sont importantes dans les cas où le navigateur de vos visiteurs sont dans l'incapacité d'afficher l'image de fond (affichage des images désactivée, problème serveur, temps de réponse trop long...). Veillez donc à mettre des couleurs proches de l'image.

Les autres propriétés ne doivent pas être modifiées, les margin et padding à 0 permettent d'initialiser les marges externes et internes de la liste à puces, le display: inline combiné au float: left permettent d'aligner côte à côte des éléments qui sont pourtant définis en display: block, valeurs nécessaire pour pouvoir fixer la largeur et la hauteur de ces éléments.

Code CSS pour des boutons ajustables

C'est ce code CSS que vous devez utiliser si vous souhaitez que les boutons soient proportionnels à la largeur du texte qu'ils contiennent:

CSS

#nav li {
    margin: 0;
    padding: 0;
    display: inline;
}

#nav li a:link, #nav li a:visited {
    display: block;
    float: left;
    height: 32px;
    line-height: 32px;
    text-decoration: none;
    text-align: center;
    background: url(nav.gif) repeat-x;
    padding: 0 20px;
}

#nav li a:hover, #nav li a:active {
    background: url(nav.gif) 0 -32px;
    padding: 0 20px;
}

Les différences par rapport au code précédent, sont les suivantes:

La propriété width disparaît et est remplacée par une deuxième valeur de padding (20px dans l'exemple) qualifiant les marges internes gauche et droite des liens.

Dans la propriété background on renseigne un nouveau paramètre: repeat-x, qui permet de répéter selon l'axe des abcisses votre images de fond. Il faut veuiller à ce que cette image soit un motif répétitif. Vous aurez ainsi des boutons qui s'ajustent, dans la largeur, à la taile de vos liens.

Les autres propriétés sont expliquées au paragraphe précédent: Code CSS pour des boutons de largeur fixe

Images de fond

Vous trouverez ci-dessous les images utilisées pour les exemples du 1er paragraphe de cet article. Pour les télécharger, cliquez droit puis sélectionnez Enregistrer l'image sous...

Menu 1:

Menu 2:

Menu 3:

Menu 4:

Menu 5:

Menu 6:

Menu 7:

Quelques ressources

• Sliding doors of CSS [En]
• Sliding doors of CSS, part II [En]
• Les portes coulissantes de CSS [Fr]
• Les portes coulissantes de CSS, partie II [Fr]
• css4DesignR: Menu HTML et CSS, sliding doors et item current en PHP [Fr], si vous avez la main sur le php de votre blog, cette article vous permettra de conserver l'état du survol sur le bouton après avoir cliqué dessus afin de mieux savoir dans quelle partie du blog/site vous êtes.