Bonjour à toutes et tous,

Pour commencer sachez que mon niveau en JS est d’environ 0,001%. Autant dire que je n’y connais rien. Mes seules connaissances sont celles acquises en bidouillant le code ci-dessous. Ne trouvant rien de compréhensible à mon niveau en 3 jours de recherches et de prise de tête, je m’en remets à vous.

J’ai trouvé sur votre site un menu qui me convient et que j’ai façonné à mon gout. A savoir:
  • remplacer le «clik» par mouseover/out
  • remplacer slideToggle par fadeIn/Out
  • supprimer l’ajout de la class alt


Mon image-bouton dégradé sert, au survol, à déclencher l’apparition du menu. Jusque là tout va bien, j’ai tout compris.

Mon problème : je n’arrive pas à maintenir le sous-menu ouvert quand je passe d’un lien à l’autre. Le sous-menu se referme et se rouvre à chaque changement de lien.

Je ne comprends pas pourquoi, en commandant la class «menu_body» (donc la balise ul) qui représente la liste dans son ensemble, ce sont les sous-éléments (balise li) qui réagissent au lieu du parent (balise ul).

J’ai tenté de combiner toutes les classes et dans tous les sens mais rien n’y fait. Le code que j’ai mis ci-dessous est le meilleur résultat que j’ai pu obtenir. Merci d’avance à tous ceux qui me répondront.

Voici le code html+JS:
Code : 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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Animated Drop Down Menu with jQuery</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
 
 
<script type="text/javascript" src="jsfiles/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
 
    $('.container').mouseover(function () {
	$('ul.menu_body').fadeIn('medium');
	});
 
    $('.container').mouseout(function () {
	$('ul.menu_body').fadeOut('medium');
	});
 
	$('.container ul.menu_body li a').mouseover(function () {
	$(this).animate({ fontSize: "12px", paddingLeft: "40px" }, 150 );
    });
	$('ul.menu_body li a').mouseout(function () {
	$(this).animate({ fontSize: "12px", paddingLeft: "10px" }, 150 );
    });
});
</script>
</head>
 
 
<body>
    <div class="container">
        <img src="images/button2.gif" width="184" height="32" class="menu_head" />
        <ul class="menu_body">
            <li><a href="#">About Us</a></li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">Clients</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Support Forums</a></li>
            <li><a href="#">Gallery</a></li>
            <li><a href="#">Contact Us</a></li>
        </ul>
    </div>
 
</body>
</html>
Et voici le CSS:

Code : 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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
@charset "utf-8";
/* CSS Document */
 
body{
	background: #000;
	font-family: Arial, Helvetica, sans-serif;
	font-size:12px;
	margin: 0;
	padding: O;
	}
 
.container{
	margin: auto;
	padding: 0;
	display: table;
	}
 
.menu_head{
	border: 1px solid #ccc;
	}
 
.menu_body{
	margin:0;
	padding:0;
	display: none;
	}
 
.menu_body li{
	margin:0;
	padding:0;
	background: #000;
	border: none;
	list-style-type: none;
	border-left: 1px solid #333;
	}
 
.menu_body li a{
	color: #CCC;
	text-decoration: none;
	padding: 10px;
	display: block;
	}
 
.menu_body li a:hover{
	padding: 10px;
	font-weight: bold;
	color: #fff;
	text-decoration: underline;
	border-left: 5px solid #fff;
	}