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élieBilboWorld
Aides
FrancisekLa FAQ Self HTML
Blogs
PêUR Zoélie BilboWorld
Aides
FrancisekLa FAQSefl 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:

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

 

- Voir les 538 commentaires - Publié dans : Menu CSS
Contact - C.G.U. - Rémunération en droits d'auteur - Signaler un abus