Menu deroulant a 3 niveaux
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:
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:
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'> </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 :lol:) ) 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:
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"
)
); |
