Menu déroulant en CSS sans javascript, compatible IE et FF tout niveau

Jeudi 10 novembre 2005

Menu déroulant en CSS sans javascript, compatible IE et FF tout niveau

Mise à jour le 08/06/2006 22:31

Ca y'est!!! J'ai enfin réussi à adapter un menu déroulant uniquement en CSS et compatible avec Internet Explorer (IE) et Firefox (FF).

L'astuce est d'écrire 2 fois le menu et sous-menu, 1 fois pour IE (caché de FF) et 1 fois pour FF (caché de IE). Ainsi quelque soit le navigateur, le menu apparaît.

Si pour FF la gestion d'un menu déroulant est un jeu d'enfant, habituellement pour IE, on utilise du javascript.

Toute la difficulté était de trouver une solution pour la gestion du "déroulement" du menu en CSS sous IE. La solution fût de gérer un tableau. Autre difficulté, essayer autant que possible de réduire le nombre de ligne CSS en essayant de rendre communes un maximum de classes et en utilisant le "bypass" d'interprétation de propriété des 2 navigateurs.

Attention!!

Le code CSS et HTML de ce menu n'est pas très compliqué, mais de par l'architecture du blog générée par Over-blog et sur laquelle on ne peut avoir la main, son intégration dans l'entête peut être assez complexe. Donc si c'est la 1ère fois que vous touchez au CSS et à l'HTML, évitez ce menu ;-)

Si vous avez accès au javascript, préféré ce dernier ou utilisé le compromis CSS/javascript d'alsacréations ou le menu "Suckerfish" d'HTMLDog dont on trouve une très belle mise en situation ici . Pourquoi ce conseil? Aller lire le commentaire N°82 laissé sur cet article... je ne veux surtout pas contribuer au non respect des standards et ébranler Internet.

Voili voilou, passons aux choses sérieuses

Le menu

Ci-dessous, l'exemple avec 2 boutons, vous pouvez aussi allez voir sur mon blog test son intégration dans l'entête:

Blogs

PêUR Zoélie BilboWorld

Aides

Francisek La FAQ Self HTML

Blogs
PêUR Zoélie BilboWorld

Aides
Francisek La FAQ Sefl HTML

Les CSS

Ci-dessous le code CSS à insérer tout en bas de votre CSS (j'ai essayé de mettre des noms parlants aux classes afin de comprendre sur quelles parties elles influent :

CSS

.menuIE {
display:none !important;
display:block;
}

a.boutonIE, a.boutonIE:link, a.boutonIE:visited, a.boutonIE:active {
    color:#000;
    width:90px;
    height:18px;
    display:block;
    background:#c33;
    border:1px solid #000;
    margin-right:1px;
    text-align:center;
    float:left;
    text-decoration:none;
    font-family: verdana;
    font-size:10px;
    line-height:18px;
    overflow:hidden;
}

a.boutonIE:hover {
    color:#fff;
    background:#000;
    overflow:visible;}

a.boutonIE:hover table {
    display:block;
    background:#eee;
    border-collapse:collapse;
}

.boutonFF {
    color:#000;
    width:90px;
    height:18px;
    display:block !important;
    display:none;
    background:#c33;
    border:1px solid #000;
    margin-right:1px;
    text-align:center;
    float:left;
    text-decoration:none;
    font-family: verdana;
    font-size:10px;
    line-height:18px;
    overflow:hidden;
}

.boutonFF:hover {
    height:auto;
    cursor:pointer;
    color:#fff;
    background:#000;
}

a.SousMenu, a.SousMenu:link, a.SousMenu:visited, a.SousMenu:active {
    display:block;
    width:90px !important;
    width:88px;
    height:18px;
    border-bottom:1px solid #000;
    text-decoration:none;
    color:#000;
    font-family: verdana;
    font-size:10px;
    text-align:center;
    background:#eee;
}

a.SousMenu:hover {background:#BCCCD2;}

Voici quelques explications pour comprendres le CSS ci-dessus:

.menuIE : affichage du menu pour Internet Explorer, caché pour Firefox grâce à display:none !important; En effet le !important est interprété par Firefox et force ce dernier à utiliser cette propriété alors qu' Internet explorer ne l'interprète pas et prend la propriété suivante.
a.boutonIE : style du bouton primaire pour Internet Explorer
a.boutonIE:hover : style du bouton primaire au passage de la souris pour Internet Explorer
a.boutonIE:hover table : style du tableau (boutons secondaires ou liste déroulante) au passage de la souris pour Internet Explorer
.boutonFF : style du bouton primaire pour Firefox. Affichage pour Firefox, caché pour Internet Explorer grâce à display:block !important; En effet le !important est interprété par Firefox et force ce dernier à utiliser cette propriété alors que Internet explorer ne l'interprète pas et prend la propriété suivante.
.boutonFF:hover : style du bouton primaire au passage de la souris pour Firefox
a.SousMenu : affichage du sous-menu (liste déroulante ou boutons secondaires) aussi bien pour Firefox que pour Internet Explorer.

L'HTML

Ci-dessous le code HTML à insérer dans votre entête en mode source:

HTML

<div class="menuIE">
<a class="boutonIE" href="#nogo">Blogs
<table><tr><td>
<a class="SousMenu" href="#nogo">PêUR</a>
<a class="SousMenu" href="#nogo">Zoélie</a>
<a class="SousMenu" href="#nogo">BilboWorld</a>
</td></tr></table>
</a>
<a class="boutonIE" href="#nogo">Aides
<table><tr><td>
<a class="SousMenu" href="#nogo">Francisek</a>
<a class="SousMenu" href="#nogo">La FAQ</a>
<a class="SousMenu" href="#nogo">Self HTML</a>
</td></tr></table>
</a>
</div>

<div class="boutonFF">Blogs<br />
<a class="SousMenu" href="#nogo">PêUR</a>
<a class="SousMenu" href="#nogo">Zoélie</a>
<a class="SousMenu" href="#nogo">BilboWorld</a>
</div>
<div class="boutonFF">Aides<br />
<a class="SousMenu" href="#nogo">Francisek</a>
<a class="SousMenu" href="#nogo">La FAQ</a>
<a class="SousMenu" href="#nogo">Self HTML</a>
</div>

Voici quelques explications pour comprendre le code HTML ci-dessus:

Il y a 2 pavés, le premier est le code HTML pour l'affichage sous Internet Explorer, le deuxième est le code HTML pour l'affichage sous Firefox. Cela implique que vous devez saisir 2 fois les noms des menus primaires, 2 fois les noms des menus secondaires et 2 fois les URLs vers lesquelles doivent pointer ces noms
Vous devez remplacer #nogo par l'URL du lien que vous souhaitez.
Seul sous Internet Explorer le menu primaire peut-être un lien. Si vous ne voulez pas qu'il pointe sur une adresse particulière, laisser #nogo

Personnalisation

Soyez très attentif à la personnalisation de ce menu, en effet quand vous changez une propriété du CSS pensez à vérifier l'impact sous FF et sous IE car cette propriété peut se trouver à 1 endroit pour FF et à un autre pour IE.... soyez homogène. Quelques pistes pour vous aider:

Changer la couleur de fond du bouton primaire : modifier background dans a.boutonIE ET .boutonFF
Changer la couleur de fond du bouton primaire au passage de la souris: modifier background dans a.boutonIE:hover ET .boutonFF:hover
Changer la couleur de fond du menu déroulant: modifier background dans a.boutonIE:hover table ET a.SousMenu
Changer la couleur du lien survolé au passage de la souris dans le menu déroulant: modifier background dans a.SousMenu:hover
Si vous voulez changer la largeur des menus.... évitez! Sinon: changer la largeur des boutons primaires via la propriété width dans a.boutonIE ET .boutonFF + changer la largeur des menus déroulants via la propriété width:'largeur des boutons primaires'px !important pour FF et width:'largeur des boutons primaires - 2'px pour IE dans a.SousMenu (Hummmm, bon courage!!)
Si vous voulez changer la hauteur du menu primaire.... évitez! Sinon, changer la hauteur des boutons via les propriétés height et line-height (qui doivent avoir la même valeur) dans a.boutonIE ET .boutonFF
Si vous voulez changer la hauteur des différents boutons dans le menu déroulant.... évitez! Sinon, changer la hauteur des boutons via la propriété height dans a.SousMenu
Enfin, veillez à ce que la taille de la police soit inférieure à la taille des différents boutons: font-size inférieur à height quelque soit la classe du CSS.

Important: décalage au déroulement

Pour finir, au niveau de l'intégration du menu dans l'entête, vous devez veiller à ce que la hauteur de l'entête soit suffisante pour contenir le "déroulement" du menu. En effet s'il n'est pas assez haut, sous FF, le menu déroulant apparaitra mais ne sera pas cliquable et sous IE le menu primaire sera "rogné"!!!! Pour augmenter la taille de votre entête vous pouvez rajouter la propriété height à l'identifiant de l'entête:

CSS

#top { [ne touchez pas ce qui existe dejà]; height:200px; }

200px est donné à titre d'exemple, en effet tout dépend du contenu de votre entête. Si vous n'avez pas d'idée de la hauteur à mettre, procéder par dichotomie: mettre 200px, et augmentez la taille progressivement jusqu'à le menu s'affiche correctement sous IE et FF.

Evolution, maintenance

Avec plus de 300 commentaires sur cet article (et oui!!! ce menu n'est pas facile à mettre en oeuvre) les questions que vous vous posez sont sûrement dans les réponses que j'ai faites.

Vous trouverez par exemple:

le code pour que ce menu soit vertical à la réponse du commentaire N°21
le code à rajouter pour que le menu passe par dessus le reste du blog et ne décale pas ce dernier vers le bas à la réponse du commentaire N°255
l'explication pourquoi il faut éditer le code HTML avec Internet Explorer et pas Firefox à la réponse du commentaire N°302

Bon courage!!!!!!!!!!!!!!!!

commentaires (0) publié dans : Menu CSS