Menus plaisirs ...

Le menu déroulant sans JS et marchant partout, ce Graal du bloggeur.

Il y en a un exemple chez PêUR dans cet article. C'est un beau boulot, complexe, qui a suscité de nombreuses questions (plus de 300 commentaires !), qui marche bien mais semble demander beaucoup de doigté quand on veut l'adapter chez soi, en particulier parce qu'une grande partie du menu doit être décrite en double : pour IE d'une part, pour les autres d'autre part.

Peut-on faire aussi bien et plus simple ? Tentative de réponse, dissection admirative du travail de PêUR et reprise du problème à la base.

---

Note désolée : cet article repose entièrement sur les commentaires conditionnels que propose IE. Hélas l'éditeur en ligne d'OB traite très mal ces commentaires (juin 2009) et la technique proposée est donc inutilisable sur un blog OB. Sur d'autres sites, peut-être ?

---

Analyse de la question

Mais vous n'êtes pas obligé de lire le baratin…

Un menu, c'est quoi ?

Dans une page HTML, ce n'est ni plus ni moins qu'une série de liens, disposés en ligne ou en colonne. On peut l'inclure dans une table mais cette pratique, toujours possible, est tombée en désuétude au profit de la liste ul.

Si la liste est laissée  au naturel , verticale, on obtient un menu vertical tel que les modules  Derniers articles  ou  Liens .

Pour obtenir un menu horizontal, on peut  flotter  les éléments de la liste ou, encore plus simple, ne pas écrire du tout de liste mais seulement une succession de liens (les possibilités de mise en forme sont alors moindres).

L'aspect des liens au repos et au survol se définit en CSS. Au total, faire un menu à un seul niveau, sans sous-menus, est plutôt facile.

Un menu déroulant, c'est quoi ?

C'est un menu, horizontal ou vertical, dont les articles font apparaître un autre menu (un  sous-menu ) lorsqu'on les survole. Dans cet article je me limiterai au format classique  barre horizontale et sous-menus verticaux .

Pourquoi c'est si compliqué à fabriquer ?

Là, on sort du B-A BA. Voici un projet de menu déroulant, sans souci de présentation, et avec sûrement beaucoup trop de classes et d'identifiants :

 <!-- Menu proprement organisé (ne marche pas sous IE) --> <ul id="menu"> <li class="choix">bonbons <ul> <li class="sschoix"><a href="citron.html">Citron</a></li> <li class="sschoix"><a href="fraise.html">Fraise</a></li> </ul> </li> <li class="choix">chocolats <ul> <li class="sschoix"><a href="noir.html">Noir</a></li> <li class="sschoix"><a href="lait.html">Lait</a></li> </ul> </li> </ul> 

La clé du fonctionnement d'un menu, c'est le survol des articles, nous sommes d'accord ? La difficulté vient de ce qu'IE (au moins jusqu'à la version 7) ne sait traiter, en CSS, le survol que pour les liens :

 #menu a:hover {font-weight:bold} /* le lien passe en gras */ 

… alors que, avec les autres navigateurs, on peut le détecter sur à peu près tout :

 #menu ul:hover {border-color:yellow} /* la bordure d'un sous menu passe en jaune */ .sschoix:hover {background-color:green} /* l'item passe en fond vert */ 

Pour qu'IE réagisse au survol de ces  à peu près tout , il faut faire du JavaScript. Notre projet de menu sans JavaScript restera donc inerte sous IE.

Si ce n'est que ça… Puisque'IE ne comprend le survol que pour les liens, il devrait suffire de remplacer la liste de premier niveau par un div garni de liens tout bêtes, qui contiendront les sous-menus :

 <!-- Menu trafiqué pour faire plaisir à IE (mais ne marche pas non plus)--> <div id="menu"> <a class="choix" href="#nogo">bonbons <ul> <li class="sschoix"><a href="citron.html">Citron</a></li> <li class="sschoix"><a href="fraise.html">Fraise</a></li> </ul> </a> <a class="choix" href="#nogo">chocolats <ul> <li class="sschoix"><a href="noir.html">Noir</a></li> <li class="sschoix"><a href="lait.html">Lait</a></li> </ul> </a> </div> 

Voui. Sauf que ce n'est pas permis : un lien ne peut, d'une part, contenir que des éléments en-ligne (=pas de liste), d'autre part et surtout, ne peut pas contenir un autre lien. Zut alors.

IE, c'est merveilleux

Tout le  charme  d'IE, outre quelques bugs d'affichage mignons et une gestion de ressources toute d'économie et de sobriété, est de proposer sa propre vision de ce que devraient être HTML et CSS.

Dans le cas qui nous occupe IE, s'il ne détecte le survol que pour les liens, permet en revanche de fourrer dans ces liens certaines choses qui ne devraient pas s'y trouver. En particulier, il permet à un lien de contenir une table, ce qui donne au menu la tête suivante :

 <!-- Menu avec tables dans les liens : ne marche qu'avec IE --> <div id="menu"> <a class="choix" href="#nogo">bonbons <table cellspacing="0" cellpadding="0" border="0"><tr><td> <a class="sschoix" href="citron.html">Citron</a> <a class="sschoix" href="fraise.html">Fraise</a> </td></tr></table> </a> <a class="choix" href="#nogo">chocolats <table cellspacing="0" cellpadding="0" border="0"><tr><td> <a class="sschoix" href="noir.html">Noir</a> <a class="sschoix" href="lait.html">Lait</a> </td></tr></table> </a> </div> 

Notez qu'il n'est plus du tout question de liste, on n'en est plus à raffiner le balisage. Ce code, bien que bâtard, marche sous IE : c'est bien. Mais, parce que bâtard, il ne marche plus du tout ou très mal avec les autres : c'est mal. Comment faire ?

Marier la carpe et le lapin, recette PêUR

La réponse de PêUR repose sur deux idées :

1. écrire les deux variantes du menu, avec deux identifiants différents menuIE et menuFF dans le code source ;
2. dans le CSS, en exploitant un bug d'IE, commander l'affichage de l'une plutôt que de l'autre selon le navigateur utilisé.

Exploiter un bug d'IE ? Il n'y a pas de moyen officiel de distinguer les navigateurs dans le CSS, et il ne peut pas y en avoir : CSS est une norme indépendante des navigateurs ou bien ce n'est pas une norme. On se sert donc du fait qu'IE ne comprend pas certaines règles de CSS, pour lui masquer les règles qui ne le concernent pas. On exploite certains bugs pour en compenser d'autres : ce logiciel est vraiment merveilleux (bis).

Partant de là, PêUR est conduit à dupliquer beaucoup de règles CSS, tout comme il avait dupliqué le HTML. Le résultat fonctionne, mais confine à l'héroïsme.

Marier la carpe et le lapin, recette personnelle

Je voulais éviter de tout écrire en double : c'est fatigant et ça complique les modifications ultérieures. Je voulais aussi éviter le procédé des bugs compensés : il suffirait qu'une version future d'IE corrige un bug et pas l'autre pour que tout s'effondre… (c'est d'ailleurs ce qui se produit avec IE8)

Par bonheur, Microsoft a fini par proposer une technique nommée  commentaire conditionnel  qui permet d'inclure dans un même source HTML des variantes destinées à IE et d'autres destinées aux autres navigateurs. Exemple :

 <!--[if IE]> Votre navigateur est IE <![endif]--> <!--[if !IE]><--> Votre navigateur n'est pas IE <!--><![endif]--> 

Les expressions entre crochets ne sont interprétées que par IE, les autres navigateurs n'y voient que des commentaires HTML ordinaires (et c'est là que nous sommes coincés par l'éditeur OB : il élimine les commentaires HTML).

Avec cette idée en tête, je me suis d'abord efforcé de rendre le HTML  propre  aussi proche que possible du HTML pour IE, ce qui conduit à :

 <div id="menu"> <div class="choix">bonbons <a class="sschoix" href="citron.html">Citron</a> <a class="sschoix" href="fraise.html">Fraise</a> </div> <div class="choix">chocolats <a class="sschoix" href="noir.html">Noir</a> <a class="sschoix" href="lait.html">Lait</a> </div> </div> 

Plus de table, plus de listes, les liens du premier niveau sont devenus des div et c'est tout.

Avec des commentaires conditionnels on peut fusionner ces deux codes en évitant toute redondance – et l'on arrive à …

… masquer le baratin

HTML carpo-lapinesque

 <div id="menu"> <!--[if IE]> <a class="choix" href="#nogo"> <![endif]--> <!--[if !IE]><--> <div class="choix"> <!--><![endif]--> <div class="libchoix">bonbons</div> <!--[if IE]> <table cellspacing="0" cellpadding="0" border="0"><tr><td> <![endif]--> <a class="sschoix" href="citron.html">Citron</a> <a class="sschoix" href="fraise.html">Fraise</a> <!--[if IE]> </td></tr></table></a> <![endif]--> <!--[if !IE]><--> </div> <!--><![endif]--> <!--[if IE]> <a class="choix" href="#nogo"> <![endif]--> <!--[if !IE]><--> <div class="choix"> <!--><![endif]--> <div class="libchoix">chocolats</div> <!--[if IE]> <table cellspacing="0" cellpadding="0" border="0"><tr><td> <![endif]--> <a class="sschoix" href="noir.html">Noir</a> <a class="sschoix" href="lait.html">Lait</a> <!--[if IE]> </td></tr></table></a> <![endif]--> <!--[if !IE]><--> </div> <!--><![endif]--> </div> 

Selon que le navigateur est IE ou pas, le premier niveau se compose de liens ou de div, le deuxième niveau est emballé dans une table ou pas.

J'ai aussi emballé les choix de premier niveau dans des div class="libchoix" dans le seul but de mieux contrôler la mise en page.

Modifier l'hybride carpo-lapinesque

Pour modifier un choix de premier niveau, intervenir sur le div class="libchoix".

Pour rajouter un choix de premier niveau, copier/coller l'un des deux blocs avec tout son harnachement de commentaires.

Pour ajouter un article dans un sous-menu, copier/coller l'un des a class="sschoix".

Décorer l'hybride carpo-lapinesque

Voici un exemple de CSS pour que l'usine à gaz tienne debout. En gras, ce qui ne doit pas être touché – il y en a peu mais c'est sacré ! Les valeurs numériques sont à votre guise, il faut seulement veiller à respecter certaines relations mentionnées en commentaire.

 /* 1 - Emplacement de la barre de menu*/ .menu {position:absolute; top: 20px; left:50px; width:184px; } /* Explications plus bas */ /* Dimensions des articles */ .libchoix, .sschoix {width:90px; height:18px; line-height:18px; }/* indiquer les deux, et identiques */ /* 2 - Boutons de la barre de menu */ .choix { float:left; text-decoration:none; margin:0px; padding:0px; } .choix:hover { cursor:pointer; } /* complément non-IE */ /* Mise en forme des boutons de la barre */ .libchoix {color:black; background:cyan; font-family: verdana; font-size:10px; text-align:center; border:1px solid black; } .choix:hover .libchoix {color:white; background:gray; border-bottom-color: red;} /* 3 - Lignes des sous-menus */ a.sschoix {display:none; } .choix:hover a.sschoix {display:block;} /* Mise en forme des menus déroulants */ a.sschoix { text-decoration:none; border-style: solid;border-color:red; border-width:0 1px 1px; color:black; background:#eee; font-family: verdana; font-size:10px; text-align:center;} a.sschoix:hover {background:#bcccd2;} 

Dissection de l'hybride carpo-lapinesque

La barre est en position:absolute, comme ça : et d'une, elle s'affiche par-dessus la page, et de deux, les menus se dérouleront sans perturber la page.

On lui donne une largeur (ici, c'est le minimum : 184 = 2 * (1+90+1) ) pour être certain qu'elle ne se  replie  pas si on rétrécit la fenêtre.

Les div ou les a de classe choix emballent un choix principal et le sous-menu associé. En faire des flottants permet de disposer la barre de menu à l'horizontale.

La mise en forme des choix principaux se fait par les deux lignes où il est question de libchoix.

Mécanique d'apparition : au repos, les articles des sous-menus sont en display:none donc pas affichés. Lorsqu'on survole un bouton de la barre .choix:hover, il repassent en display:block et réapparaissent donc.

Note : j'ai voulu que la bordure du sous-menu, lorsqu'il apparaît, soit la même sur les quatre côtés, d'où une petite complication sur les border de .choix:hover .libchoix et a.sschoix. Si cela vous est égal, supprimez le border-bottom-color: red; dans le premier et simplifiez le second en border-width:1px; – mais là, on coupe les cheveux en fines lamelles.

Précaution anti-disparition

Selon l'endroit où vous greffez le menu, il faut aussi penser à prévenir le risque de  rognage  du menu. Si par exemple le menu figure dans le bandeau supérieur, ajoutez cette ligne :

 #ln_0 {overflow:visible} 

Ouverture de parapluie

Normalement, tout ça marche sans accroc.  Normalement  … soyez tout de même indulgent envers l'artiste ;-) et signalez-moi vos difficultés, vos suggestions, vos critiques… en commentaire.

Comments

[Anna K]

Un vrai pervers ce Bren :P :)

[Aïe mes doigts !]

Meuh non... pourquoi tu dis ça ? Méssssante ! :-D

[oiseau-lyre]

Ha voilà! Je me disais bien que dans toutes les solutions compilées dans mon marque-page, certaines étaient obsolètes!
Pourtant, celle de suckerfish (http://peutetreunereponse.over-blog.com/article-6167796.html) m'avaient paru des plus ancienne...

Et que dire de celles-ci:
http://www.jejavascript.net/menu.php
http://francisek.over-blog.com/article-800522.html
http://annak.over-blog.com/article-10149090.html
http://photo.graph.over-blog.com/article-30589505.html
http://photo.graph.over-blog.com/article-29749243.html

Dépassées aussi?

Je suis en privilège, et je ne voudrais pas me tromper et casser tout mon blog... Raison pour laquelle je tergiverse...

Merci de cette réponse rapide!

[AïmD !]

L'article de Pêur est un peu ancien, mais le menu suckerfish a progressé depuis, ainsi que les explications - je vous conseille d'aller lire directement le site de suckerfish. J'ai donné un coup de
main à Djac Baweur en son temps pour implanter un tel menu, allez donc voir. Je vous conseille vraiment ce
menu.

Pas lu tous les articles... Les soucis sont les mêmes pour tout le monde, de toute manière.
Les menus en CSS reposent tous sur le même principe : le menu principal est une liste, un sous-menu est une liste dans un item de la liste principale et ainsi de suite. Le reste est affaire de CSS
pour placer tout ça, de :hover pour faire apparaître et disparaître.
Là aussi il faut s'accommoder d'IE (au moins jusqu'à 7) qui ne comprend pas le ">" dans les sélecteurs. Ce ">" (exemple : .menu>li) signifie "père de". Mon exemple désigne ainsi, sans
ambiguïté, un article du menu principal. IE (à confirmer pour IE8) ne comprend que "menu li". Et alors ? Alors ce sélecteur désigne TOUS les li du menu, y compris ceux des sous-menus. Si on ne veut
pas multiplier les classes et si l'on veut éviter les redondances il faut donc ruser puissamment.
La solution de jejavascript est simple et robuste mais demande beaucoup de clics à mon goût.
Peur de casser ? Supposons que vous vouliez insérer un menu suckerfish dans l'en-tête. D'abord commencez par sauvegarder CSS et source HTML du module avant toute intervention, ça vous donnera une
sortie de secours.
Ensuite : vous constaterez certainement que le menu ne se déroule pas convenablement, que les sous menus "passent sous" les articles. Gardez votre calme : c'est lié aux réglages par défaut du blog.
Il rogne tout ce qui dépasse, histoire de protéger les maladroits contre leur maladresse. Je postule que vous n'êtes pas maladroit, ou du moins que vous ne prenez pas votre maladresse pour un bug
du blog (ce que font beaucoup de râleurs).
La parade anti-rognage est
#cl_0_0 {overflow:visible}et roulez jeunesse.

La réponse rapide est un coup de bol, mais merci pour le mot gentil :)

[oiseau-lyre]

Bonjour!

Je lis et relis tout ce qui concerne le menu déroulant avant de me lancer.
Mais ce qui me manque dans les blogs d'aide, c'est un exemple visuel du résultat final...

J'espère me lancer un jour!

[AïmD !]

..histoire de prouver que c'est faisable ? ;-) Petit résumé :

Les menus déroulants devraient être simples à fabriquer.

D'ailleurs ils le sont en pur CSS et sans JavaScript, mais IE7 et antérieur ne sait pas traiter le CSS requis, alors qu'IE8 en semble enfin capable.

Seulement IE7, et même 6, n'est pas encore mort. De là, floraison de solutions de contournement à base de JavaScript. La plus simple, élégante et efficace est, je crois, celle de Suckerfish
que présente PêUR. Autrement dit : si on est autorisé à mettre du JS (blog privilège ou premium) et si on suppose que les utilisateurs d'IE autorisent Js (ou ne savent pas le désactiver...), ce
qui est vrai le plus souvent, on s'en tire encore à bon compte.

Les vrais pépins surgissent lorsqu'on est en confiance, donc sans JS : un menu en pur HTML/CSS et sans JS et pour tous les navigateurs ne peut être qu'un bricolage
acrobatique et précaire.

La solution de PêUR (cf lien en début d'article) a le mérite de marcher en dépit de sa lourdeur

La mienne, ici présentée, est valide aussi (je l'ai testée) et un peu plus économique (pas de redondance) mais repose sur une technique (les commentaires conditionnels) que ne digère pas
(plus...) l'éditeur OB.

Conclusions :

ma jolie solution est inapplicable aujourd'hui chez OB (voir la "note désolée" en début d'article),

celle de PêUR est valide mais compliquée,

le choix le plus raisonnable demeure à mes yeux le menu suckerfish,

le jour (un an ? deux ?) où il n'y aura plus d'utilisateurs d'IE ante-version8 on pourra enfin laisser tomber le recours au JS, et faire du pur CSS.

Je sais, tout ça est agaçant : merci Microsoft....

[Jo]

Alors ce sera un commentaire juste pour dire que je suis là, je passe voir s'il y a du nouveau. Mais je ne vais pas m'aventurer plus loin sur cet article là parce que j'y comprends que pouic.
Bon week-end ! :)

[Aïe mes doigts !]

Rhooo...que pouic, vraiment ? Je suis malheureuuuuuuux ! :'-(M'enfin bon, on se fera une raison .... ;-)