Bonjour à tous,

Voilà mon problème, je suis déjà passé sur ce forum pour faire fonctionner mon menu de base, sauf que maintenant je souhaite l'améliorer.

Pour voir clairement ce que je veux faire, vous trouverez ci-dessous mon modèle mais réalisé en flash :/
www.converse.com

Voici ma liste html :
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
 
<div id="menu">
 
	<div class="dropHolder">
 
		<!-- dropmenu -->
		<div class="dropdown-menu">
 
			<div class="menu">Menu 1</div>
			<ul id="menu-1" class="down-list" style="display:none;">
				<li><a href="./a.html">a</a></li>
				<li><a href="./b.html">b</a></li>
				<li><a href="./c.html">c</a></li>
			</ul>
		</div>
 
	</div>
	<div class="dropHolder">
 
		<!-- dropmenu -->
		<div class="dropdown-menu">
			<div class="menu">Menu 2</div>
			<ul id="menu-2" class="down-list" style="display:none;">
				<li><a href="./a.html">a</a></li>
				<li><a href="./b.html">b</a></li>
				<li><a href="./c.html">c</a></li>
			</ul>
		</div>
 
	</div>
	<div class="dropHolder">
 
		<!-- dropmenu -->
		<div class="dropdown-menu">
 
			<div class="menu">Menu 3</div>
			<ul id="menu-3" class="down-list" style="display:none;">
				<li><a href="./a.html">a</a></li>
				<li><a href="./b.html">b</a></li>
				<li><a href="./c.html">c</a></li>
			</ul>
		</div>
	</div>
 
</div> <!-- FIN #menu -->
Et mon 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
 
$(document).ready(function(){
 
	$.fn.delay = function(time, callback){
		jQuery.fx.step.delay = function(){};
		return this.animate({delay:1}, time, callback);
	}
 
	$('.dropdown-menu').hover(
		function(){
			$('.menu', this).addClass('slide-down').addClass('active');
			$(this).stop(true, false).delay(600, function(){
				$(this).find('.down-list').slideDown(600);
				$(this).find('.menu').fadeTo(300, 1.0);
			});
		}, 
		function(){
			$('.menu').removeClass('active');
			$(this).stop(true, false).delay(300, function(){
				obj = this;
				$(this).find('.down-list').slideUp(600, function(){$('.menu', obj).removeClass('slide-down');});
				$(this).find('.menu').fadeTo(300, 0.0);
			});
		}
	);
});
 
$(function() {
	$('.menu').fadeTo(0, 0.0);
});
Pour l'heure, j'arrive au survol de mes <div class="menu">Menu X</div> à faire glisser mes listes <ul id="menu-X" class="down-list" style="display:none;">...</ul> en slideDown dessous. Ces mêmes <div class="menu"> apparaissent avec un fadeTo. Les 2 problèmes qui me bloquent sont les suivants :

1- Sur mes <div class="menu"> j'applique un background en css qui du coup reproduit bien l'effet du menu de
www.converse.com mais mon texte disparait également...

2- Mes listes :
<ul id="menu-X" class="down-list" style="display:none;">...</ul>
ne glissent pas mais restent fixes, il n'y a que le background appliqué en css sur ul#menu-x.down-list

Voilà j'espère être assez clair dans ma formulation, sinon dites le moi !

Merci pour vos pistes