Menu déroulant ; A l'aide...

Question

opai

14 Apr 2011 à 22:56

Bonjour,

Je suis très peu fort en réalisation de site. Je souhaite refaire mon site actuel et réaliser un menu déroulant horizontal en haut de page.
J'ai trouvé un "générateur" de menu, easymenu sur internet. Mais ça bug...
Les trois premier menu sont bons mais les 4 et 5 restent bloqué et font planté la page. Soue mozilla ça va encore, sous Internet explorer ça bloque complètement.
J'ai vu le tutoriel menu accordéon, mais ce n'est pas ce que je recherche. Je veux un menu où les sous menu s'ouvrent au survol de la souris.
Voici la page "d'essai' : http://notesvagabondes.free.fr/essaimenu.html

Et voilà la page sur mon site : http://notesvagabondes.free.fr/essai.html

C'est pour une association, j'y passe pas mal de temps, mais faute de compétences, je ne crois pas pouvoir trouver l'erreur.

Merci d'avanc epour votre aide.

Voici le script de la page essaimenu, peut être une erreur sautera aux yeux des connaisseurs:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>essaimenu</title>

<style type="text/css">
/* Changer la police du menu :*/
#easymenu{ font-family:Arial, Helvetica, sans-serif;}
/* Changer le style des liens principaux */
/* aspect normal*/
#easymenu a.principal{color:#000066; text-decoration:none; color:#FFFFFF;}
/* aspect une fois séléctionné*/
#easymenu a.activ{ background-color:#0099FF; color:#FFFFFF; text-decoration:none;position:absolute;}
/* Changer le style de la barre derriére les entrées principales */
#barreeasymenu{ background-color:#000066; background-repeat:repeat-x; background-position:top;}
/* Changer le style de l'arrière plan des sousmenus */
#easymenu .sousmenu{ background-color:#0033CC; border:1px solid black; border-top-width:0px;}
/* changer le style des entrées des sousmenus*/
/* aspect en temps normal*/
#easymenu .sousmenu a{ color:#FFFFFF; text-decoration:none; display:block; border-top:1px solid white;}
/* aspect lors du passage de la sourie*/
#easymenu .sousmenu a:hover{ background-color:#0066FF;}
/* Eviter de toucher à cette partie, risques de dysfonctionnements du menu*/
#easymenu a.principal,#easymenu a.activ{position:absolute;}
#barreeasymenu{width:100%;}
#easymenu .sousmenu{position:absolute; overflow:hidden;}
#body{ margin:0px;}
</style>
</head>

<body>

<div id="easymenu"><a id="lienprincipal0" class="principal" style="width: 20%; left: 0%;" href="#" onmouseover="montrer(0);" onmouseout="cacherbientot()">accueil</a>
<a id="lienprincipal1" class="principal" style="width: 20%; left: 20%;" href="#" onmouseover="montrer(1);" onmouseout="cacherbientot()">Qui
suis-je ?</a>
<a id="lienprincipal2" class="principal" style="width: 20%; left: 40%;" href="#" onmouseover="montrer(2);" onmouseout="cacherbientot()">Photos</a>
<a id="lienprincipal3" class="principal" style="width: 20%; left: 60%;" href="#" onmouseover="montrer(3);" onmouseout="cacherbientot()">Amerique
sud</a>
<a id="lienprincipal4" class="principal" style="width: 20%; left: 80%;" href="#" onmouseover="montrer(4);" onmouseout="cacherbientot()">Concerts-vidéos</a>
<div id="barreeasymenu">   </div>

<div id="menu0" class="sousmenu" style="left: 0%; width: 20%;" onmouseout="cacher()" onmouseover="montrer(0);">
<a href="http://notesvagabondes.free.fr">accueil</a>
</div>

<div id="menu1" class="sousmenu" style="left: 20%; width: 20%;" onmouseout="cacher()" onmouseover="montrer(1);">
<a href="http://notesvagabondes.free.fr/notvag/association.html">Qui
suis-je ?</a>
</div>

<div id="menu2" class="sousmenu" style="left: 40%; width: 20%;" onmouseout="cacher()" onmouseover="montrer(2);">
<a href="http://notesvagabondes.free.fr/island/gallerieislande.html">Islande</a>
<a href="http://notesvagabondes.free.fr/turquie/gallerieturquie.html">Turquie</a>
<a href="http://notesvagabondes.free.fr/iran/gallerieiran.html">Iran</a>

</div>

<div id="menu3" class="sousmenu" style="left: 60%; width: 20%;" onmouseout="cacher()" onmouseover="montrer(3);">
<a href="http://notesvagabondes.free.fr/nv/projet.html">projet</a>
<a href="http://notesvagabondes.free.fr/nv/itineraire.html">itineraire</a>
<a href="http://notesvagabondes.free.fr/blob/dotclear.1/index.php">carnet</a>
</div>

<div id="menu4" class="sousmenu" style="left: 80%; width: 20%;" onmouseout="cacher()" onmouseover="montrer(4);">
<a href="http://notesvagabondes.free.fr/nv/burkina.html">Burkina</a>
<a href="http://notesvagabondes.free.fr/nv/asiecentrale.html">Asie
centrale</a>
<a href="http://notesvagabondes.free.fr/notvag/videos.html">videos</a>

</div>

</div>

<script language="javascript">var entrees = new Array();var hini = new Array();for (a=0; a<3; a++) {entrees[a] = 0;
hini[a] = document.getElementById('menu'+a).offsetHeight;
document.getElementById('menu'+a).style.height = '0px';
}
function mise_a_jour_affichage() {
for (a=0; a<entrees.length; a++) {
if (entrees[a]>0) {
entrees[a]--;
document.getElementById('menu'+a).style.display = 'block';
document.getElementById('menu'+a).style.height = (document.getElementById('menu'+a).offsetHeight+(hini[a]-document.getElementById('menu'+a).offsetHeight)/10)+'px';
document.getElementById('lienprincipal'+a).className='activ'
} else {
document.getElementById('menu'+a).style.height = (document.getElementById('menu'+a).offsetHeight/2)+'px';
if (document.getElementById('menu'+a).offsetHeight<4) {
document.getElementById('menu'+a).style.display = 'none';
document.getElementById('lienprincipal'+a).className='principal'
}
}
}
setTimeout("mise_a_jour_affichage()", 20);
}
mise_a_jour_affichage();
function montrer(num) {
for (a=0; a<entrees.length; a++) {
entrees[a] = 0;
}
entrees Smiley num

= 1000;
}
function cacher() {
for (a=0; a<entrees.length; a++) {
entrees[a] = 0;
}
}
function cacherbientot() {
for (a=0; a<entrees.length; a++) {
if (entrees[a]>0) {
entrees[a] = 10;
}
}
}
// Adapter taille de la barre au contenu
hmax=0
for (a=0; a<entrees.length; a++) {
if(hmax<document.getElementById('lienprincipal'+a).offsetHeight){
hmax = document.getElementById('lienprincipal'+a).offsetHeight;
}
}
document.getElementById('barreeasymenu').style.height = hmax+'px';
</script>
<br>

</body>
</html>

Xulu

15 Apr 2011 à 13:11

Salut,

Peut-être quelque chose de plus simple comme ce que propose pompage.net (http://www.pompage.net/pompe/deroulants/) te conviendrait mieux ? (et serait plus facile à mettre en place ?)

Laurie-Anne

15 Apr 2011 à 13:51

Bonjour et bienvenue parmi nous Smiley smile

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien "Aide" qui apparaît tout en haut du forum est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation Smiley smile

fvsch

15 Apr 2011 à 14:23

Bonjour,

Un détail: avec le Doctype utilisé, les navigateurs afficheront la page en mode Quirks (par exemple, Internet Explorer 9 tâchera d'afficher la page comme le ferait IE5!). En général, on cherche à éviter ça. Solution: un doctype HTML4 (ou XHTML1) complet, avec URL de la DTD; ou bien un doctype HTML5.

Ensuite, quelques conseils pour la mise en place d'un menu déroulant:
- Attention, il y a beaucoup d'exemples pouraves sur le Web! Même ceux qui sont très corrects sont en général anciens, et comportent tout un tas de trucs pour faire marcher le menu déroulant sur IE6 voire IE5. Alors que IE6 en 2011...
- On part sur une structure de listes UL imbriquées. On veillera à ce que tous les intitulés du menu soient cliquables, y compris ceux de premier niveau qui devront pointer vers un index de rubrique (ou à défaut la première page de la rubrique). Les sous-menus du menu déroulant ne doivent pas être indispensables pour accéder au contenu (nombre d'utilisateurs ne pourront pas les utiliser de toute manière)!
- En utilisant CSS uniquement, on doit pouvoir masquer les sous-menus, et les afficher au survol de l'élément LI qui les contient. Les sous-menus (UL de deuxième niveau) sont généralement positionnés en absolu. On pensera à utiliser le sélecteur d'enfant (symbole ">") pour limiter la portée des styles CSS, et éviter d'avoir à rajouter des classes partout dans le code HTML (en gros, un id sur le UL de premier niveau devrait suffire).
- Enfin, une fois que tout ceci marche, on peut s'occuper de rendre le menu utilisable au clavier. Pour ça, il faut passer par JavaScript. Il y a des scripts relativement bien fichus pour ça, par exemple Superfish (plugin jQuery, à éviter si on n'utilise pas déjà jQuery sur le site).

Sujet clos

JavaScript, DOM et API Web HTML5

Menu déroulant ; A l'aide...