Menu CSS - Sliding doors (Horizontal)

Publié le par PêUR

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):

Menu 2 (ajustable):

Menu 3 (ajustable):

Menu 4 (ajustable):

Menu 5 (fixe):

Menu 6 (fixe):

Menu 7 (fixe):

 

 

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:

2 images en 1

2 images en 1

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:

2 images en 1

Menu 2:

2 images en 1

Menu 3:

2 images en 1

Menu 4:

2 images en 1

Menu 5:

2 images en 1

Menu 6:

2 images en 1

Menu 7:

2 images en 1

 

Quelques ressources

Publié dans CSS

Pour être informé des derniers articles, inscrivez vous :

Commenter cet article

arro 16/11/2007 22:22

pour INFO complémentaire : ce principe de rollover sans téléchargement d'un second état (seconde image) a été repris par les codeurs des forums phpBB pour la -futur- version 3 (actuellement en RC). Ceux ci citent cette source : http://wellstyled.com/css-nopreload-rollovers.html
Le code est différent (utilisation : background-position)
/* à noter au passage que ce principe complique sensiblement les modifications de thèmes/design pour ceux n'ayant pas une bonne base dans les outils graphiques */

MBr 09/10/2007 15:20

BONJOUR ET MERCI POUR TOUTES CES INFOS? C UN SUPER SITE !!
Voila je voudrais mettre ce menu au centre de mon entete, sous l'image, mais je n'y arrive pas !! c soit a droite soit a gauche, comment faire ??

Merci d'avance

Karine 10/09/2007 00:26

Pour ceux qui serait confrontés à un problème identique au mien
(présentation du menu en escalier sous MSIE)
voici la solution à l'erreur que j'avais commise:

Dans le
#nav li j'avais par mégarde remplacé le display: inline; par un malencontreux display: block;
d'où le disgracieux escalier d'Explorer.
et voilà !...

Peûr, quand reviens-tu ?...

Karine 05/09/2007 05:01

Bonsoir Pêur,
Suite à ta précieuse aide de début juillet, je pensais avoir à peu près réussi mon bandeau de nav. Mais grosse déconvenue (encore une fois !) lorsque je l'ai mis en ligne ce week-end et fais tester sous IE !... par divers amis.
C'est la cata. Qu'ai-je encore raté?
Je suis loin d'être une pro en CSS (forcément..) et là, j'ai encore besoin du super coup de main.
Merci d'avance.

Anais 13/08/2007 12:19

bonjour, j'ai un gros problème _ _ J'arrive pas à centrer mon menu. J'éspère que vous pourrez m'aider surtout que je suis sure que la solution est toute simple. J'ai essayée toutes les solutions que je connaissais mais aucune ne marche.
Merci d'avance
bonne continuation