Depuis que les évènements "onfocus" et "onblur" ne s'appliquent plus qu'à quelques balises (celle de formulaire) on ne peut plus faire de menu déroulant simplement.
Voici un truc qui marche presque parfaitement et qui est simple.
Code : Tout sélectionner
<div id="menu">
<div>
<button onfocus="libere(this);">nom du menu</button>
<a href="#">lien</a>
<a href="#">lien</a>
</div>
<div>
<button onfocus="libere(this);">nom du menu</button>
<a href="#">lien</a>
<a href="#">lien</a>
</div>
</div>Tout le menu dans un div identifié comme "menu".
Chaque partie qui devra se déroulée se place dans un div à part à l'intérieur du menu.
Chaque section comporte un bouton qui reste toujours visible et qui sert à dérouler le menu. Il se redesign très bien avec CSS. Le bouton réagit à l'évènement onfocus en appelant la fonction qui va dérouler le menu.
A la suite du bouton, les liens qui apparaissent quand le menu est déroulé.
Voici maintenant le code Javascript.
Code : Tout sélectionner
function libere(element) {
occulte() ;
var liens = element.parentNode.getElementsByTagName("a");
for(var i=0; i<liens.length; i++) {
liens[i].style.display = "";
}
}
function occulte() {
var menu = document.getElementById("menu");
var liens = menu.getElementsByTagName("a");
for(var i=0; i<liens.length; i++) {
liens[i].style.display = "none";
}
}La fonction occulte ferme tout les menus. La fonction libere déroule le menu indiqué après avoir tout replié.
Juste avant de finir la page HTML d'un joli </body></html> il faut appeler la fonction occulte pour qu'elle replie les menus.
On pourrait replier les menus d'office avec CSS mais une personne qui désactive Javascript ne verrait aucun menu même après 72 clics sur un des boutons.
Reste le dernier point. Juste avec ça, il y aura toujours un menu déroulé même si on clique à côté du menu. C'est pourquoi il faut que le reste du site soit dans un énorme div avec onclick="occulte()" pour refermer les menus.
On pourrait être tenté de mettre <body onclick="occulte()"> à la place, seulement le menu se trouve dans le <body>... Donc en cliquant sur un bouton on déroule le menu, le clic se propage jusqu'à <body> qui va gentiment vous le refermer à la figure (oui je sait c'est stupide).
