Webmaster Hub > Menu déroulant en JavaScript

K1000

mardi 14 octobre 2008 à 15:35

Bonjour,

Pour ma première utilisation de JavaScript, j'ai voulu faire un menu déroulant pour mon site.

Le principe : une image où, lorsque le curseur de la souris passe, un menu se déroule de la gauche vers la droite.

Le problème : je n'ai pas trouvé d'autre solution que la définition d'une zone "sensible" pour générer l'apparition du menu. Si je ne le fais pas, dès que le curseur arrive dans le haut de la page, le menu apparait. Mais, avec la définition de cette zone, je me retrouve à ce que le menu apparaisse dès que le curseur s'en approche (donc, même lorsqu'il n'est pas encore sur l'image). Si je réduis la zone pour qu'elle ne soit que sur l'image, le menu n'apparait pas du tout.

Si quelqu'un a une idée pour résoudre ce problème, je l'en remercie d'avance.

Voici mon code :

CODE-BOX

<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>test</title>
<style type="text/css">
#menu_pal li:hover > .sous_menu {display : block; background-color: red;}
</style>
<script type="text/javascript">

</script>
</head>
<body
style="direction: ltr; background-image: url(../images/Green.jpg);">
<div>
<ul id="menu_pal">
<div style="position: absolute; width: 200px;"
onmouseover="java script:affiche('ssmenu1');"
onmouseout="java script:affiche('');">
<a href="#"><img src="../images/menu.gif"
border="0"></a>
<ul style="font-weight: bold; color: rgb(0, 0, 102);"
id="ssmenu1">
<div style="position: absolute; top: 50px; left: 110px;"><a
href="carriere.html" style="text-decoration: none;">Sa
carrière</a></div>
</ul>
</div>
</ul>
</div>
</body>

b0b0

mardi 14 octobre 2008 à 19:42

bonsoir,

moi je séparerais le div avec le mouseover, et l'image.

A chacun, tu les mets en position absolute, et tu joues avec la propriété css z-index pour mettre la zone a cliquer SUR l'image

Ca devrait fonctionner

b0b0

Dudu

mercredi 15 octobre 2008 à 02:23

Salut

Les <div> dans les <ul>, il faut oublier tout de suite, ça n'existe pas

Un <ul> ne peut comporter qu'un seul type de balise-enfant: les <li>.

K1000

mercredi 15 octobre 2008 à 09:28

CITATION(Dudu @ mercredi 15 octobre 2008 à 03:23)

Un <ul> ne peut comporter qu'un seul type de balise-enfant: les <li>.

Merci pour cette info... Par quoi faut-il que je remplace les <ul> pour pouvoir mettre des <div> ? (je ne veux pas de <li>)

A B0b0 : je débute et je ne suis pas sûre d'avoir bien saisi ce que tu me proposes... j'ai fait quelques essais mais je n'obtiens rien de probant.

b0b0

mercredi 15 octobre 2008 à 12:01

En effet, Dudu a raison, je n'avais même pas vu les imbrications de DIV dans UL ...

Alors ... voila ta page HTML corrigée, valide XHTML, et sans javascript :

Dis moi si ca t'aide ...

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type" />
<title>test</title>
<style type="text/css">
#menu_pal {
position: absolute; width: 200px;
}
#menu_pal li ul li{
display:none;
}
#menu_pal li:hover > ul li{
display:block;
}
</style>
</head>
<body style="direction: ltr; background-image: url(../images/Green.jpg);">
<ul id="menu_pal">
<li>menu1
<ul>
<li><a href="carriere.html" style="text-decoration: none;">sous menu 1-1 Sa carrière</a></li>
<li>sous menu 1-2</li>
</ul>
</li>
<li>menu2
<ul>
<li>sous menu 2-1</li>
<li>sous menu 2-2</li>
</ul>
</li>
</ul>

</body>
</html>

b0b0

Dudu

mercredi 15 octobre 2008 à 14:06

CITATION(K1000 @ mercredi 15 octobre 2008 à 10:28)

Merci pour cette info... Par quoi faut-il que je remplace les <ul> pour pouvoir mettre des <div> ? (je ne veux pas de <li>)

Tu ne veux pas de li ? Pourquoi donc ? Le couple <ul><li> est le plus indiqué pour ton menu.

Mais si tu veux mettre du div-à-gogo, j'ai une solution encore plus simple: des tableaux imbriqués comme il y a 10 ans.
Quoiqu'on en dise, les tableaux imbriqués sont moins néfastes que du div-en-veux-tu-en-voila

K1000

mercredi 15 octobre 2008 à 14:25

A B0b0 : oui, merci, j'y vois déjà plus clair. J'ai réussi à faire presque tout ce que je voulais. Il ne me manque plus qu'à trouver comment faire apparaître mon sous-menu à droite de l'image...

CITATION(Dudu @ mercredi 15 octobre 2008 à 15:06)

Tu ne veux pas de li ? Pourquoi donc ? Le couple <ul><li> est le plus indiqué pour ton menu.

J'aimerai que mon sous-menu apparaisse à droite de mon image. Avec les balises <li>, il apparait forcément dessous... y a-t-il une astuce ?

b0b0

mercredi 15 octobre 2008 à 14:34

pour être plus clair, tu veux que :
- peu importe le menu principal sur lequel on se trouve, le sous menu s'affiche toujours au meme endroit?

Si oui essaye ca :

CODE-BOX

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type" />
<title>test</title>
<style type="text/css">
#menu_pal {
width:200px;
}
#menu_pal li ul {
display:none;
}
#menu_pal li:hover > ul {
display:block;
position:absolute;
top: 20px;
left:150px;
}

</style>
</head>
<body style="direction: ltr; background-image: url(../images/Green.jpg);">
<ul id="menu_pal">
<li>menu1
<ul>
<li><a href="carriere.html" style="text-decoration: none;">sous menu 1-1 Sa carrière</a></li>
<li>sous menu 1-2</li>
</ul>
</li>
<li>menu2
<ul>
<li>sous menu 2-1</li>
<li>sous menu 2-2</li>
</ul>
</li>
</ul>
</body>
</html>

b0b0

K1000

mercredi 15 octobre 2008 à 15:08

Non, pas exactement je vais essayer d'être claire. Mon menu se déroule lorsque le curseur arrive sur l'image. Chaque lien qui apparaît mène sur une page, mais il n'y a pas de sous-menu à proprement parler. Ceci va peut-être mieux visualiser ce que je souhaite obtenir :

IMAGE lien1 lien2 lien3

Pas de sous-menu aux liens...

b0b0

mercredi 15 octobre 2008 à 15:32

et ca ?

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type" />
<title>test</title>
<style type="text/css">
#theLinks{
display:none;
position:absolute;
top:0px;
left:300px;
}
</style>
<script type="text/javascript">

</script>
</head>
<body style="direction: ltr; background-image: url(../images/Green.jpg);">
<img src="http://www.google.com/intl/fr_ALL/images/logo.gif" alt="" title="" onmouseover="show('theLinks')" />
<div id="theLinks" style="display:none;">
<a href="carriere.html" style="text-decoration: none;">sous menu 1-1 Sa carrière</a> | <a href="carriere.html" style="text-decoration: none;">sous menu 1-1 Sa carrière</a> | <a href="#" onclick="hide('theLinks')">cacher le menu</a></div>
</body>
</html>

b0b0

K1000

mercredi 15 octobre 2008 à 15:45

Voilà, c'est l'idée ! Le menu doit par contre disparaître lorsque le curseur "quitte" la zone à cliquer. Je vais essayer, merci !

b0b0

mercredi 15 octobre 2008 à 16:11

CITATION

Le menu doit par contre disparaître lorsque le curseur "quitte" la zone à cliquer. Je vais essayer, merci !

oui mais si tu fais ca, le temps que ta souris aille de l'image au lien du menu, ce dernier va disparaitre !

Sinon, il faut mettre un chrono pour que la disparition se fasse X secondes après que le curseur soit parti de l'image ...

exemple :

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type" />
<title>test</title>
<style type="text/css">
#theLinks{
display:none;
position:absolute;
top:0px;
left:300px;
}
</style>
<script type="text/javascript">

</script>
</head>
<body style="direction: ltr; background-image: url(../images/Green.jpg);">
<img src="http://www.google.com/intl/fr_ALL/images/logo.gif" alt="" title="" onmouseover="show('theLinks')" onmouseout="hide('theLinks')" />
<div id="theLinks" style="display:none;">
<a href="carriere.html" style="text-decoration: none;">sous menu 1-1 Sa carrière</a> | <a href="carriere.html" style="text-decoration: none;">sous menu 1-1 Sa carrière</a></div>
</body>
</html>

Avec ce code, une fois que ta souris quitte l'image, tu as 1 secondes (1000 ms dans le code) pour aller cliquer sur un lien du menu avant qu'il disparraisse.

b0b0

K1000

mercredi 15 octobre 2008 à 19:10

CITATION(b0b0 @ mercredi 15 octobre 2008 à 17:11)

oui mais si tu fais ca, le temps que ta souris aille de l'image au lien du menu, ce dernier va disparaitre !

Je n'y avais pas pensé à celle-là...

Très bonne idée le coup du chrono !

Merci pour ton aide et ta patience !

b0b0

mercredi 15 octobre 2008 à 19:13

mais de rien ...

Content d'avoir aidé...

tu pourrais aussi bien désactiver le chrono quand on passe la souris sur les liens du menu (pour ne pas qu'il disparaissent automatiquement), puis reactiver le chrono quand on enleve sa souris du sous menu

Je te laisse chercher un peu, dis le si tu n'y arrives pas...

b0b0

Dudu

jeudi 16 octobre 2008 à 04:10

CITATION(K1000 @ mercredi 15 octobre 2008 à 15:25)

J'aimerai que mon sous-menu apparaisse à droite de mon image. Avec les balises <li>, il apparait forcément dessous... y a-t-il une astuce ?

Aïe.

Donc tu penses qu'en changeant de balises, ça va apparaître différemment.

Alors..
Les balises HTML sont juste pour structurer le texte.
Seul le langage CSS permettra de modifier l'affichage. Que celui-ci soit fait à base de <div><div><div> raz-la-gueule, ou bien que celui-ci soit fait de balises ordonnées sémantiquement.

Ce sont deux choses radicalement différentes

K1000

jeudi 16 octobre 2008 à 09:19

CITATION(Dudu @ jeudi 16 octobre 2008 à 05:10)

Ce sont deux choses radicalement différentes

Oui, je m'en suis rendu compte... merci !

K1000

vendredi 17 octobre 2008 à 14:40

CITATION(b0b0 @ mercredi 15 octobre 2008 à 20:13)

Je te laisse chercher un peu, dis le si tu n'y arrives pas...

j'ai supposé qu'il fallait modifier la fonction show mais je ne parviens pas à trouver quels paramètres ajouter...

b0b0

mercredi 22 octobre 2008 à 14:00

et voila

Pour les changements :
1/ je déclare d'abord la variable timeoutEvent en global, afin qu'elle puisse être utilisée dans les 2 fonctions :
var timeoutEvent;
2/ lorsqu'on déclenche le chrono d'une seconde qui va cacher le menu, on l'assigne a la variable timeoutEvent :
timeoutEvent = setTimeout("document.getElementById(\"" + id +"\").style.display = 'none'",1000);
3/ lorsqu'on passe sa souris au dessus du DIV qui contient le menu, on remontre le menu, et surtout on tue le chrono

clearTimeout(timeoutEvent);
4/il faut bien qu'on detecte le passage de la souris au dessus du menu, donc ...

<div id="theLinks" style="display:none;" onmouseover="show('theLinks');" onmouseout="hide('theLinks');">

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type" />
<title>test</title>
<style type="text/css">
#theLinks{
display:none;
position:absolute;
top:0px;
left:300px;
}
</style>
<script type="text/javascript">

</script>
</head>
<body style="direction: ltr; background-image: url(../images/Green.jpg);">
<img src="http://www.google.com/intl/fr_ALL/images/logo.gif" alt="" title="" onmouseover="show('theLinks')" onmouseout="hide('theLinks')" />
<div id="theLinks" style="display:none;" onmouseover="show('theLinks');" onmouseout="hide('theLinks');">
<a href="carriere.html" style="text-decoration: none;">sous menu 1-1 Sa carrière</a> | <a href="carriere.html" style="text-decoration: none;">sous menu 1-1 Sa carrière</a></div>
</body>
</html>

Voilà,

j'espère que ca t'aidera

b0b0

K1000

mercredi 22 octobre 2008 à 15:04

Super, merci !

b0b0

mercredi 22 octobre 2008 à 15:57

mais de rien