Discussion :

[Doki95]

Bonjour,

Histoire de m'amuser un peu, j'essaye en vain de créer un menu déroulant à 3 niveau à l'aide de jQuery. J'ai suivi le tuto de ClarkLab (http://dmouronval.developpez.com/tut...ry/menu-anime/). Jusque ici, tout va bien.
Cependant, ce n'est pas ce que je souhaite obtenir. Pour ma part, je veux avoir un menu qui s'affiche lorsque la souris passe dessus. Jusque là, ça fonctionne. Mais a chaque fois, je rencontre un problème lorsque je déplace la souris, soit le menu n'arrête pas de s'afficher et de se cacher, soit il ne s'affiche même pas.

Je transmet les sources de mon code javascript et php(pour la génération du menu).

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
$(".topMenu").click( function () {
	$(".tabMenu").slideToggle("medium");
});
$(".tabMenu li").click( function () {
	if($(this).children(".subMenuTab") !== "") {
		$(this).children(".subMenuTab").slideToggle("medium");
	}
});

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
 
<div id="menu">
	<ul class="topMenu">
		<li>
			<a href="javascript:void(0);">Afficher les menus</a>
		</li>
	</ul>
</div>
<div id="block">
	<?php echo $content_for_layout; ?>
		<ul class="tabMenu">
		<?php 
			foreach($tab_menu as $item_menu) {
				echo "<li><a href='javascript:void(0);'>".$item_menu['label']."</a>";
				if(isset($item_menu['subMenu'])) {
					echo "<span class='deplier'>&nbsp;</span>";
					echo "<ul class='subMenuTab'>";
					foreach($item_menu['subMenu'] as $item_submenu) {
						echo "<li><a href='javascript:void(0);'>".$item_submenu['label']."</a></li>";
					}
					echo "</ul>";
				}
				echo "</li>";
			} ?>
		</ul>
</div>

En cherchant sur le forum, je suis tombé sur le site de danielhagnoul (http://danielhagnoul.developpez.com/, j'espère qu'il ne m'en voudra pas d'avoir mit son site ) ) et comme de par hasard, c'est exactement le type de menu que je souhaite. J'ai regarder un peu son code, mais je ne trouve pas le script correspondant au menu. Je sais qu'il est possible de le faire via les fonctions de jQuery, mais je ne trouve désespérément pas.

Si quelqu'un peut me donner un petit coup de main.

Merci d'avance,
Doki.

PS : actuellement, le code javascript est celui du tuto de ClarkLab. Ce code fonctionne mais ce n'est pas ce que je veux.

PS 2 : j'ai oublier le tableau du menu

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 
$tab_menu = array(
	array(
		"label" => "Fermer la session"
	),
	array(
		"label" => "Aide",
		"subMenu" => array(
			array("label" => "Utilisation du site"),
			array("label" => "Contact")
		)
	),
	array(
		"label" => "Rechercher",
		"subMenu" => array(
			array("label" => "Fichier"),
			array("label" => "Utilisateur")					
		)
	),
	array(
		"label" => "Paramètres",
		"subMenu" => array(
			array("label" => "Affichage"),
			array("label" => "Compte")
		)
	),
	array(
		"label" => "Programmes"
	)
);

[danielhagnoul]

Bonsoir.

Je me sers de : http://www.dynamicdrive.com/dynamicindex1/ddlevelsmenu/

[Doki95]

Je vais regarder ton lien. Je vous tiens au courant.

[Doki95]

Voilà, j'ai mit en place le menu déroulant. Il fonctionne comme il faut.

Il y a quand même quelque chose que je ne comprend pas. Pourquoi créer des iframe non visible ?
J'ai justement un problème avec l'une d'entre elle car elle me crée un scroll dés que j'affiche le menu. Comment peut on faire pour supprimer cette barre de défilement ? Je pense que le code pour corriger se problème se trouve dans le fichier javascript suivant :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
positionshim:function(header, submenu, dir, scrollX, scrollY){
	if (header._istoplevel){
		var scrollY=window.pageYOffset? window.pageYOffset : this.standardbody.scrollTop
		var topgap=header._offsets.top-scrollY
		var bottomgap=scrollY+this.docheight-header._offsets.top-header._dimensions.h
		if (topgap>0){
			this.shimmy.topshim.style.left=scrollX+"px"
			this.shimmy.topshim.style.top=scrollY+"px"
			this.shimmy.topshim.style.width="99%"
			this.shimmy.topshim.style.height=topgap+"px" //distance from top window edge to top of menu item
		}
		if (bottomgap>0){
			this.shimmy.bottomshim.style.left=scrollX+"px"
			this.shimmy.bottomshim.style.top=header._offsets.top + header._dimensions.h +"px"
			this.shimmy.bottomshim.style.width="99%"
			this.shimmy.bottomshim.style.height=bottomgap+"px" //distance from bottom of menu item to bottom window edge
		}
	}
}

J'ai un peu de mal a comprendre comment se script fonctionne. Je pense que même pour vous, il va vous manquer des parties du code pour pouvoir comprendre. Mais si quelqu'un a quand même une idée, je suis preneur.

Doki

[danielhagnoul]

Bonjour.

Versatile "IFRAME SHIM" feature to ensure drop down menus appear above browser controls such as SELECT menus.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
...
 
var ddlevelsmenu={
 
enableshim: true, //enable IFRAME shim to prevent drop down menus from being hidden below SELECT or FLASH elements? (tip: disable if not in use, for efficiency)
 
...

Reste à savoir si cette modification est indispensable (le problème est peut-être dans votre code), elle risque d'induire d'autres problèmes.

[Doki95]

Je vais vérifier mon code. Mais je remarque quand même que lorsque je désactive les iframe, la scroll barre n'apparait plus.

[camyo]

Moi, j'utilise celui là

le menu superfish

[Doki95]

Moi, j'utilise celui là

le menu superfish

Merci camyo.

Celui ci a fonctionner presque du premier coup.

Merci a toi aussi danielhagnoul, mais je vais garder la solution de camyo.

Doki