Javascript : aide pour un menu

alex.hitman

Posté(e) le 28 février 2005

- Signaler

Posté(e) le 28 février 2005

Bonsoir à tous, je suis plutôt débutant dans la programmation en javascript et j'essai de créer un menu grâce à la visibilité des calques.

Voila une partie de ce que j'ai fait :

function affichemenu(i) {

document.getElementById('menu'+i).style.visibility="visible";

}

function masquemenu(i) {

setTimeout(document.getElementById('menu'+i).style.visibility="hidden",1000);

}

</script>

<div id="Info" style="border:black 1px inset; position:absolute; width:150px; height:16px; z-index:1; left: 0px; top: 0px;" onMouseOut="masquemenu(1)"

onMouseOver="affichemenu(1)">

<div align="center" class="Style1"><a href="javascript:" class="Style3">Informatique</a> </div>

Alors voila, j'explique ce que je voudrai savoir :

Tout d'abord, affichemenu(i) et masquemenu(i)

J'ai mis i car j'ai en fait plusieurs calques nommés menu1, menu2 etc.. i remplace donc un nombre.

Est-ce que c'est bon ce que j'ai fait ensuite :

onMouseOut="masquemenu(1)"

J'ai remplacé i par un pour qu'il affiche le calque menu1, mais je ne sais pas si c'est bon, ou si je dois faire une fonction pour chaque calque :

function affichemenu() {

document.getElementById(menu1).style.visibility="visible";

}

idem mais avec menu2 etc...

Ensuite, je voudrai utiliser clearTimeout avec un onMouseOver dans "menu1" pour annuler le setTimeout (et que le menu reste affiché).

Seulement, il faut que le setTimeout à annuler ait une ID.

Que dois-je faire pour ça ?

Dois-je le mettre dans une variable ?

Merci d'avance

Citer

KewlCat

Posté(e) le 1 mars 2005

- Signaler

Posté(e) le 1 mars 2005

Quelques pistes :

- concernant ton problème de "je fais une seule fonction avec paramètre ou plusieurs sans paramètre", fais des essais avec paramètre. Si ça ne fonctionne pas (ce dont je doute) ou si cette façon de faire te déplait (si p. ex. tu as besoin de faire des choses spécifiques à certains menus), tu pourras toujours faire du copier/coller...

- concernant ton problème d'ID à passer à clearTimeout, tu as trouvé la solution toi-même : il faut stocker l'ID retournée par le setTimeout si tu veux pouvoir annuler le timeout associé (logique).

- si tu as des éléments cliquables située sous les div ("calques") contenant tes menus, je te conseille de plutôt jouer avec la propriété display plutôt qu'avec la propriété visible de tes menus. Au moins pour que les évenements de souris n'aillent pas se perdre n'importe où...

Citer

alex.hitman

Posté(e) le 1 mars 2005

Auteur

- Signaler

Posté(e) le 1 mars 2005

OK, je vais essayer de voir commme ça, merci.

Citer

tangui

Posté(e) le 1 mars 2005

- Signaler

Posté(e) le 1 mars 2005

tu veux faire un menu de quel style?

Citer

alex.hitman

Posté(e) le 1 mars 2005

Auteur

- Signaler

Posté(e) le 1 mars 2005

J'essai de faire un menu horizontal qui affiche les sous menus au passage de la souris.

Voila ce que j'ai fait (je n'ai pas encore travaillé sur "display", et je précise que les liens sont encore fictifs) :

<head>

<title>Document sans nom</title>

function MM_reloadPage(init) { //reloads the window if Nav4 resized

if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {

document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}

else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();

}

MM_reloadPage(true);

</script>

menus = new Array("menu1","menu2","menu3","menu4","menu5");

masquer = new Array("setTimeout(document.getElementById(menu1).style.visibility='hidden',1000);","setTimeout(document.getElementById(menu2).style.visibility='hidden',1000);","setTimeout(document.getElementById(menu3).style.visibility='hidden',1000);","setTimeout(document.getElementById(menu4).style.visibility='hidden',1000);","setTimeout(document.getElementById(menu5).style.visibility='hidden',1000);");

function resteaffiche(i) {

clearTimeout(masquer+[+i+])

}

function affichemasque(i+j+k+l+m) {

document.getElementById('menu'+i).style.visibility="visible";

document.getElementById(menus[j]).style.visibility="hidden";

document.getElementById(menus[k]).style.visibility="hidden";

document.getElementById(menus[l]).style.visibility="hidden";

document.getElementById(menus[m]).style.visibility="hidden";

}

</script>

<!--

.Style1 {font-size: 14px}

.Style2 {color: #66FFFF}

.Style3 {color: #000000}

a:link {

text-decoration: none;

}

a:visited {

text-decoration: none;

}

a:hover {

text-decoration: none;

}

a:active {

text-decoration: none;

}

-->

</style>

</head>

<body>

<div id="Info" style="border:black 1px inset; position:absolute; width:150px; height:16px; z-index:1; left: 0px; top: 0px;"

onMouseOut="masquer[0]" onMouseOver="affichemasque(12345)">

<div align="center" class="Style1">Informatique</div>

</div>

<div id="Web" style="border:black 1px inset; position:absolute; width:150px; height:16px; z-index:1; left: 155px; top: 0px;"

onMouseOut="masquer[1]" onMouseOver="affichemasque(21345)">

<div align="center" class="Style1">Webmasters et internet</div>

</div>

<div id="Prog" style="border:black 1px inset; position:absolute; width:150px; height:16px; z-index:1; left: 310px; top: 0px;"

onMouseOut="masquer[2]" onMouseOver="affichemasque(31245)">

<div align="center" class="Style1">Programmation</div>

</div>

<div id="Down" style="border:black 1px inset; position:absolute; width:150px; height:16px; z-index:1; left: 465px; top: 0px;"

onMouseOut="masquer[3]" onMouseOver="affichemasque(41235)">

<div align="center" class="Style1">Téléchargements</div>

</div>

<div id="Forum" style="border:black 1px inset; position:absolute; width:150px; height:16px; z-index:1; left: 620px; top: 0px;"

onMouseOut="masquer[4]" onMouseOver="affichemasque(51234)">

<div align="center" class="Style1">Forums et Livre d'Or</div>

</div>

<div id="menu1" style="border:black 1px inset; position:absolute; width:150px; height:65px; z-index:2; left: 0px; top: 25px; background-color: #FFFFFF; layer-background-color: #FFFFFF; visibility: hidden;"

onMouseOut="masquer[0]" onMouseOver="resteaffiche(1)">

<tr>

<td onMouseOver="javascript:this.style.background='#D9ECFF'" onMouseOut="javascript:this.style.background=''"><div align="left" class="Style2"><a href="http://www.informatique-web.net/windows.php" class="Style3">Windows</a></div></td>

</tr>

<tr>

<td onMouseOver="javascript:this.style.background='#D9ECFF'" onMouseOut="javascript:this.style.background=''"><div align="left" class="Style2"><a href="http://www.informatique-web.net/linux.php" class="Style3">Linux</a></div></td>

</tr>

<tr>

<td onMouseOver="javascript:this.style.background='#D9ECFF'" onMouseOut="javascript:this.style.background=''"><div align="left" class="Style2"><a href="http://www.informatique-web.net/overclocking.php" class="Style3">Overclocking</a></div></td>

</tr>

<tr>

<td onMouseOver="javascript:this.style.background='#D9ECFF'" onMouseOut="javascript:this.style.background=''"><div align="left" class="Style2"><a href="http://www.informatique-web.net/dossiers.php" class="Style3">Tous les dossiers</a> </div></td>

</tr>

</table>

</div>

<div id="menu2" style="border:black 1px inset; position:absolute; width:150px; height:69px; z-index:2; left: 155px; top: 25px; background-color: #FFFFFF; layer-background-color: #FFFFFF; visibility: hidden;"

onMouseOut="masquer[1]" onMouseOver="resteaffiche(2)">

<tr>

<td onMouseOver="javascript:this.style.background='#D9ECFF'" onMouseOut="javascript:this.style.background=''"><a href="http://www.informatique-web.net/webmasters.php" class="Style3">Aides et dossiers</a> </td>

</tr>

<tr>

<td onMouseOver="javascript:this.style.background='#D9ECFF'" onMouseOut="javascript:this.style.background=''"><a href="http://www.informatique-web.net/outils.php" class="Style3">Outils</a></td>

</tr>

<tr>

<td onMouseOver="javascript:this.style.background='#D9ECFF'" onMouseOut="javascript:this.style.background=''"><a href="http://www.informatique-web.net/bons_plans.php" class="Style3">Bons Plans</a></td>

</tr>

<tr>

<td onMouseOver="javascript:this.style.background='#D9ECFF'" onMouseOut="javascript:this.style.background=''"><a href="http://www.informatique-web.net/divers.php" class="Style3">Divers</a></td>

</tr>

</table>

</div>

<div id="menu3" style="border:black 1px inset; position:absolute; width:150px; height:59px; z-index:2; left: 310px; top: 25px; background-color: #FFFFFF; layer-background-color: #FFFFFF; visibility: hidden;"

onMouseOut="masquer[2]" onMouseOver="resteaffiche(3)">

<tr>

</tr>

<tr>

<td onMouseOver="javascript:this.style.background='#D9ECFF'" onMouseOut="javascript:this.style.background=''"><a href="http://www.informatique-web.net/javascript.php" class="Style3">Javascript</a></td>

</tr>

<tr>

</tr>

</table>

</div>

<div id="menu4" style="border:black 1px inset; position:absolute; width:150px; height:41px; z-index:2; left: 465px; top: 25px; background-color: #FFFFFF; layer-background-color: #FFFFFF; visibility: hidden;"

onMouseOut="masquer[3]" onMouseOver="resteaffiche(4)">

<tr>

<td onMouseOver="javascript:this.style.background='#D9ECFF'" onMouseOut="javascript:this.style.background=''"><a href="http://www.informatique-web.net/logiciels.php" class="Style3">Logiciels</a></td>

</tr>

<tr>

<td onMouseOver="javascript:this.style.background='#D9ECFF'" onMouseOut="javascript:this.style.background=''"><a href="http://www.informatique-web.net/annuaire_scripts.htm" class="Style3">Scripts</a></td>

</tr>

</table>

</div>

<div id="menu5" style="border:black 1px inset; position:absolute; width:150px; height:34px; z-index:2; left: 620px; top: 25px; background-color: #FFFFFF; layer-background-color: #FFFFFF; visibility: hidden;"

onMouseOut="masquer[4]" onMouseOver="resteaffiche(5)">

<tr>

<td onMouseOver="javascript:this.style.background='#D9ECFF'" onMouseOut="javascript:this.style.background=''"><a href="http://www.informatique-web.net/phpBB-208-french/index.php" class="Style3">Forums</a></td>

</tr>

<tr>

<td onMouseOver="javascript:this.style.background='#D9ECFF'" onMouseOut="javascript:this.style.background=''"><a href="http://bonsplansdunet.agora-system.com/livre/index.php" class="Style3">Livre d'Or </a></td>

</tr>

</table>

</div>

</body>

</html>

Vu que ça ne marche pas, j'aimerais bien de l'aide, merci

Citer

tangui

Posté(e) le 1 mars 2005

- Signaler

Posté(e) le 1 mars 2005

Argh! des tableaux!!

C'est ca que tu veux faire?

http://www.alsacreations.com/articles/modelesmenus/vd2.htm

D'autres menu:

http://www.alsacreations.com/articles/modelesmenus/

Perso, j'adore ce site, il y a tout ce que je veux

Citer

alex.hitman

Posté(e) le 1 mars 2005

Auteur

- Signaler

Posté(e) le 1 mars 2005

Le menu que je veux faire ressemble assez à celui-ci mais je voudrai le programmer, surtout que ce menu n'est pas très évolué (les menus restent toujours affichés...).

Pouvez-vous alors me dire quelles sont les erreurs sur mon script svp ?

Citer

tangui

Posté(e) le 1 mars 2005

- Signaler

Posté(e) le 1 mars 2005

Bon, j'ai amélioré le menu http://www.alsacreations.com/articles/modelesmenus/hd1.htm

Rajoutes:

function cache(id) {
for (var i = 1; i<=10; i++) {
 if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
}

Et ensuite dans les menus:

<dt onmouseover="javascript:montre('smenu1');" onMouseOut="javascript:cache('smenu1');">Menu 1</dt>

Voili... j'ai pas regarder ton script par contre...

EDIT: OUBLIE, ca bug...

Citer

mofo

Posté(e) le 1 mars 2005

- Signaler

Posté(e) le 1 mars 2005

lol le tangui qui bug ...

Bon sinon j'ai pas trop compris la demande du monsieur et de son menu ... il y a beaucoup de menus tous bien fait sur le web ...

++

Citer

tangui

Posté(e) le 1 mars 2005

- Signaler

Posté(e) le 1 mars 2005

Le meme meme menu déroulant que pour rock-francais.org que tu avais fait à l'époque...

Citer

Connexion

Pas encore inscrit ?

Javascript : aide pour un menu

Messages recommandés

alex.hitman

KewlCat

alex.hitman

tangui

alex.hitman

tangui

alex.hitman

tangui

mofo

tangui

Rejoindre la conversation

En ligne récemment 0 membre est en ligne

Zebulon

Outils en ligne

Naviguer