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

Publié le par PêUR

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:

 

 

 

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:

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

Publié dans Menu CSS

Commenter cet article

Dark-Red 13/11/2007 19:56

Bonsoir,
Mon problème à surement été évoqué de nombreuses fois, mais je le repose : comment faire pour que le menu passe par dessus le reste du blog et ne le décale pas ? J'ai beau eu chercher le commentaire n°255 parmie les 537 autres et ça réponse, je ne l'ai pas trouvé... sniff

rei 31/10/2007 11:15

Tes codes html et css se chevauchent !
:)

gcyrillus 23/10/2007 17:18

bonjour,

Un probleme de mise en forme rend la page illisible en partie sous Firefox.
Superposition de textes.

Pour ce qui est de l'astuce , c'est probablement la plus vielle décrite sur le web.

Merci pour tout en tout cas.

catherine 14/10/2007 15:58

bonjour. je suis un peu embetee car il me semble avoir bien copié-collé les pgr aux bons endroits mais rien n'apparait ! peux tu m'aiguiller sur mes erreurs ? merci bcp !

Selkis1982 25/09/2007 16:00

Bonjour, j'ai mis un menu déroulant dans mon blog. Le problème c'est que lorsque je m'ai mon curseur sur le menus, il me montre les sous menus mais les sous menu me décale les message qui sont en dessous.
Peut tu m'aider ?

Je pense que pour que çà soit plus clair il faudrait aller voir mon blog. Tu comprendra plus facilement mon problème.

mon blog : http://egypteancienne.canalblog.com/

Merci d'avance