Menu déroulant en JavaScript

K1000 · 14 Octobre 2008

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 :

<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">
<!--
window.onload=affiche;
function affiche(id)
{
for (var i = 1; i<=4; i++) {
if (document.getElementById('ssmenu'+i))
{document.getElementById('ssmenu'+i).style.display='none';}
}
if (document.getElementById(id))
{document.getElementById(id).style.display='block';}
}
//-->
  </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 · 14 Octobre 2008

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 · 15 Octobre 2008

Salut

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

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

K1000 · 15 Octobre 2008

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.

Modifié 15 Octobre 2008 par K1000

b0b0 · 15 Octobre 2008

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

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

Modifié 15 Octobre 2008 par b0b0

Dudu · 15 Octobre 2008

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 · 15 Octobre 2008

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

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 · 15 Octobre 2008

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 :

<!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 · 15 Octobre 2008

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 · 15 Octobre 2008

et ca ?

<!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">
<!--
function show(id) {
				document.getElementById(id).style.display = 'block';
}
function hide(id) {
				document.getElementById(id).style.display = 'none';
}

-->
</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 · 15 Octobre 2008

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 · 15 Octobre 2008

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 :

<!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">
<!--
function show(id) {
				document.getElementById(id).style.display = 'block';
}
function hide(id) {
				setTimeout("document.getElementById(\"" + id +"\").style.display = 'none'",1000);
}

-->
</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 · 15 Octobre 2008

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 · 15 Octobre 2008

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 · 16 Octobre 2008

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 · 16 Octobre 2008

Ce sont deux choses radicalement différentes

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

K1000 · 17 Octobre 2008

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 · 22 Octobre 2008

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

<!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">
<!--
var timeoutEvent;
function show(id) {
			clearTimeout(timeoutEvent);
			document.getElementById(id).style.display = 'block';
}
function hide(id) {
			timeoutEvent = setTimeout("document.getElementById(\"" + id +"\").style.display = 'none'",1000);
}

-->
</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 · 22 Octobre 2008

Super, merci !

b0b0 · 22 Octobre 2008

mais de rien

Connexion

Menu déroulant en JavaScript

Sujets conseillés

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Veuillez vous connecter pour commenter