Aller au contenu
Zebulon

  • Pas encore inscrit ?

    Pourquoi ne pas vous inscrire ? C'est simple, rapide et gratuit.
    Pour en savoir plus, lisez Les avantages de l'inscription... et la Charte de Zébulon.
    De plus, les messages que vous postez en tant qu'invité restent invisibles tant qu'un modérateur ne les a pas validés. Inscrivez-vous, ce sera un gain de temps pour tout le monde, vous, les helpeurs et les modérateurs ! :wink:

Javascript : aide pour un menu

alex.hitman

Par alex.hitman
dans Programmation

 Partager

Messages recommandés

alex.hitman Extrem Member

alex.hitman

Posté(e)
Posté(e)

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 :

 

 

<script language="javascript">

 

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>

 

 

<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;">

 

 

 

 

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

Lien vers le commentaire
Partager sur d’autres sites

KewlCat Devil Member !

KewlCat

Posté(e)
Posté(e)

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ù...

Lien vers le commentaire
Partager sur d’autres sites
alex.hitman Extrem Member

alex.hitman

Posté(e)
  • Auteur
Posté(e)

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>

 

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<title>Document sans nom</title>

<script language="JavaScript" type="text/JavaScript">

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>

 

<script language="javascript">

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>

 

 

<style type="text/css">

<!--

.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="Layer1" style="position:absolute; width:772px; height:269px; z-index:1; left: 74px; top: 88px;">

 

<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)">

<table width="100%" border="0">

<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)">

<table width="100%" border="0">

<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)">

<table width="100%" border="0">

<tr>

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

</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>

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

</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)">

<table width="100%" border="0">

<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)">

<table width="100%" border="0">

<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>

</div>

</body>

</html>

 

 

 

 

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

Lien vers le commentaire
Partager sur d’autres sites
tangui Godlike Member

tangui

Posté(e)
Posté(e)

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 :P

Lien vers le commentaire
Partager sur d’autres sites
tangui Godlike Member

tangui

Posté(e)
Posté(e)

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...

Lien vers le commentaire
Partager sur d’autres sites
tangui Godlike Member

tangui

Posté(e)
Posté(e)

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

Lien vers le commentaire
Partager sur d’autres sites

Rejoindre la conversation

Vous pouvez publier maintenant et vous inscrire plus tard. Si vous avez un compte, connectez-vous maintenant pour publier avec votre compte.
Remarque : votre message nécessitera l’approbation d’un modérateur avant de pouvoir être visible.

Invité
Répondre à ce sujet…

×   Collé en tant que texte enrichi.   Coller en tant que texte brut à la place

  Seulement 75 émoticônes maximum sont autorisées.

×   Votre lien a été automatiquement intégré.   Afficher plutôt comme un lien

×   Votre contenu précédent a été rétabli.   Vider l’éditeur

×   Vous ne pouvez pas directement coller des images. Envoyez-les depuis votre ordinateur ou insérez-les depuis une URL.

×
 Partager
Aller sur la liste des sujets

  • En ligne récemment   0 membre est en ligne

    • Aucun utilisateur enregistré regarde cette page.
×
×
  • Créer...