Menu déroulant horizontal dynamique

Construit autour d'une liste de définition, sur le modèle du menu-horizontal.htm de Raphaël GOETTER.

Merci Alan de m'avoir signalé que cette version ne fonctionne pas sur SAFARI Je n'en ai pas trouvé la raison. En attendant, vous pouvez utiliser cette autre version avec javascript non intrusif dans le code HTML.

Feuille de style ajoutée :

Raphaël nous a habitués à penser standards et accessibilité. Les sous-menus, cachés dans le menu dynamique, sont montrés tous ouverts si javascript est désactivé. Le problème est qu'ils recouvrent du contenu.

Pour pallier à cet inconvénient une nouvelle feuille comprenant le style du menu sans javascript est créée.

sansJS.css : le menu en cas ou javascript serait désactivé, paramétré pour être entièrement visible
dynmenu.css : menu dynamique activé par javascript. Au repos les sous-menus sont cachés :
```
#menu dd{display:none}
```

On peut appliquer sur tous les menus d'alsacréations la double feuille de style en remplacement de window.onload=montre :

Mettre le css du menu dynamique dans un fichier externe nommé dynmenu.css par exemple.
ajouter display:none dans #menu dd pour que les sous-menus soient cachés.
Créer une nouvelle feuille de style dans un fichier nommé : sansJS.css comprenant le style du menu sans javascript
Modifier l'entête du fichier HTML du menu comme ceci :


<link rel="stylesheet" type="text/css" href="sansJS.css" />

Modifier le script et le placer dans le body pour IE:

<script type="text/javascript">
<!--
//window.onload=montre;  supprimé
//active la feuille de style dynamique
document.getElementsByTagName("link")[0].href="dynmenu.css"

function montre(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
//-->
</script>

Cacher le sous-menu en sortie de survol :

onmouseover="montre();"

Evènement ajouté dans les balises du div id="site" et h3 du premier titre pour quitter par le bas ou par le haut.

Menu déroulant horizontal.

Feuille de style ajoutée :

Cacher le sous-menu en sortie de survol :