slideDown + fadeTo sur une liste

**Beni-Martouff** · 25/08/2009, 16h08

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

**danielhagnoul** · 25/08/2009, 19h38

Bonsoir.

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

Impossible de comprendre le fonctionnement du CSS sans le CSS !

**Beni-Martouff** · 26/08/2009, 08h49

C'est pas faux... désolé voilà mon 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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
 
/* MENU */
 
#menu {
	font-family: Times New Roman, Times, serif;
	list-style-type: none;
	font-size: 0.8em;
	}
 
#menu .active {
    background: url('../images/design/menu-hover.jpg') bottom center no-repeat;
	width: 100px;
	height: 35px;
	font-size: 1.2em;
	font-weight: bold;
	line-height: 1.2em;
	display: block;
	color: #fefdfb;
	text-decoration: none;
	text-align: center;
	}
 
/* DROPDOWN */
 
.dropHolder {
	width: 100px;
	float: left;
	height: 1px;
	margin-left: 30px;
	}
 
.dropdown-menu  {
    position:absolute;
	margin: 40px 0 0 0;
    cursor:pointer;
    margin-left:25px;
    z-index:1;
}
 
.dropdown-menu a:link, .dropdown-menu a:visited {
    display:block !important;
    text-decoration:none !important; 
    margin:0 !important;
}
 
.dropdown-menu a:hover {
	font-weight: bold;
    text-decoration:underline !important;
}
 
.dropdown-menu .slide-down {
    background: url('../images/design/menu-hover.jpg') bottom center no-repeat;
}
 
.dropdown-menu .menu {
	width: 100px;
	height: 35px;
	font-size: 1.2em;
	font-weight: bold;
	line-height: 1.2em;
	display: block;
	color: #fefdfb;
	text-decoration: none;
	text-align: center;
}
 
/* DOWN-LIST */
 
.down-list li {
    width: 200px;
	padding: 5px 5px 5px 25px;
}
 
.down-list li a {
	color: #000 !important;
	padding-left: 5px;
}
.down-list li.titre a {
	background: url('../images/design/drop-down-titre.jpg') bottom left no-repeat;
	font-weight: bold;
	font-size: 1.3em;
	padding: 15px 0 5px 0;
}
 
ul#menu-1.down-list {
	background: transparent url('../images/design/dropdown1.png') no-repeat left bottom;
	position: absolute;
	width: 917px;
	left: -230px;
	height: 265px;
	cursor: default;
}
ul#menu-1.down-list li.titre a, ul#menu-1.down-list li a {
	position: relative;
}
ul#menu-1.down-list li.titre a:hover {
	text-decoration: none !important;
}
ul#menu-1.down-list ul.down-list-sec {
	position: absolute;
	top: 0;
	left: 250px;
}
ul#menu-1.down-list ul.down-list-sec li {
	color: #a9262e !important;
}
ul#menu-1.down-list ul.down-list-sec li a {
	color: #a9262e !important;
}
ul#menu-1.down-list ul.down-list-sec li.titre a {
	background: url('../images/design/drop-down-titre-rouge.jpg') bottom left no-repeat;
	color: #a9262e !important;
}
 
ul#menu-2.down-list {
    background: transparent url('../images/design/dropdown2.png') no-repeat left bottom;
	position: absolute;
	width: 195px;
	left: -50px;
	height: 126px;
	cursor: default;
}
ul#menu-2.down-list  li{
	width: 160px;
}
 
ul#menu-3.down-list {
    background: transparent url('../images/design/dropdown3.png') no-repeat bottom;
	position: absolute;
	width: 195px;
	left: -50px;
	height: 87px;
	cursor: default;
}
ul#menu-3.down-list li {
    width: 150px;
}

Dites vous bien que l'effet souhaité est celui de www.converse.com, et que j'en suis proche sur ma version. Merci à tous !

**danielhagnoul** · 26/08/2009, 19h52

Bonsoir.

Désolé, j'ai bien vu votre message ce matin dans mon courriel, mais j'ai été trop occupé toute la journée.

Je n'ai pas su utiliser votre feuille de style, car elle dépend d'images que je n'ai pas.

J'ai donc fait un exemple avec sa feuille de style, ainsi il pourra servir à d'autres personnes.

En espérant

que cela répond à votre question :

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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="Author" content="Daniel Hagnoul" />
    <title>Page type</title>
    <style type="text/css">
        body {
            background-color:#FFFFFF;
            color:#000000;
            font-family:Arial, Helvetica, sans-serif;
            font-size:medium;
            font-style:normal;
            font-weight:normal;
            line-height:normal;
            letter-spacing:normal;
        }
        h1,h2,h3,h4,h5 {
            font-family:"Times New Roman", Times, serif;
        }
        div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
            margin:0px;
            padding:0px;
        }
 
        /* TEST */
        /* cette feuille de style est OK sous IE8, C2 et F3 */
 
        div#menu {
            position:absolute;
            top:12px;
            left:12px;
            width:200px;
            height:auto;
        }
        div.dropHolder {
            padding-bottom:12px;
        }
        div.dropdown-menu {
            padding:6px;
        }
        div.menu {
            height:30px;
            border:1px solid #000000;
            padding-top:12px;
            background-color:#000099;
            color:#FFFFFF;
            font-weight:bold;
            text-align:center;
        }
        ul.down-list {
            list-style-type:none;
            background-color:#FFFFCC;
            color:#FFFFFF;
            border:1px solid #000000;
            display:none;
        }
        ul.down-list li {
            padding-top:6px;
            padding-left:6px;
            padding-bottom:6px;
        }
    </style>
    <script type="text/javascript" src="../lib/jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
 
            $.fn.delay = function(time, callback){
                jQuery.fx.step.delay = function(){};
                return this.animate({delay:1}, time, callback);
            }
 
            $('.dropdown-menu').hover(
                function(){
                    $(this).stop(true, false).delay(600, function(){
 
                        $('.dropdown-menu').each(function(i,item){
                            $(item).find('.menu').fadeTo(300, 0.2);
                        });
 
                        $(this).find('.menu').fadeTo(300, 1.0);
 
                        $(this).find('.down-list').slideDown(600);
                    });
                }, 
                function(){
                    $(this).stop(true, false).delay(300, function(){
 
                        $(this).find('.down-list').slideUp(600);
 
                        $('.dropdown-menu').each(function(i,item){
                            $(item).find('.menu').fadeTo(300, 1.0);
                        });
                    });
                }
            );
 
         });
    </script>
</head>
<body>
<div id="menu">
    <div class="dropHolder">
        <div class="dropdown-menu">
            <div class="menu">Menu 1</div>
            <ul id="menu-1" class="down-list">
                <li><a href="#">lien vers a du menu 1</a></li>
                <li><a href="#">lien vers b du menu 1</a></li>
                <li><a href="#">lien vers c du menu 1</a></li>
            </ul>
        </div>
    </div>
    <div class="dropHolder">
        <div class="dropdown-menu">
            <div class="menu">Menu 2</div>
            <ul id="menu-2" class="down-list">
                <li><a href="#">lien vers a du menu 2</a></li>
                <li><a href="#">lien vers b du menu 2</a></li>
                <li><a href="#">lien vers c du menu 2</a></li>
            </ul>
        </div>
    </div>
    <div class="dropHolder">
        <div class="dropdown-menu">
            <div class="menu">Menu 3</div>
            <ul id="menu-3" class="down-list">
                <li><a href="#">lien vers a du menu 3</a></li>
                <li><a href="#">lien vers b du menu 3</a></li>
                <li><a href="#">lien vers c du menu 3</a></li>
            </ul>
        </div>
    </div>
</div> <!-- FIN #menu -->
</body>
</html>

**Beni-Martouff** · 28/09/2009, 11h08

Merci danielhagnoul, j'ai été dans l'incapacité de répondre avant donc désolé pour le retard.
Je tente donc d'étudier ton script, je vois que la plupart des effets sont présents mais par contre je ne vois pas l'effet de slide du texte. Utilisant JQuery, je pensais qu'un slide appliqué sur l'élément contenant le texte suffirait mais apparemment non... As tu des informations à ce sujet ? Merci beaucoup pour ton aide

**danielhagnoul** · 28/09/2009, 11h48

Bonjour.

Il y a bien un effet de slide sur le menu :

Code :

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

$(this).find('.down-list').slideDown(600);

Vous pouvez augmenter la durée de 0.6s à 2s par exemple :

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
 
            $('.dropdown-menu').hover(
                function(){
                    $(this).stop(true, false).delay(600, function(){
 
                        $('.dropdown-menu').each(function(i,item){
                            $(item).find('.menu').fadeTo(300, 0.2);
                        });
 
                        $(this).find('.menu').fadeTo(300, 1.0);
 
                        $(this).find('.down-list').slideDown(2000);
                    });
                }, 
                function(){
                    $(this).stop(true, false).delay(300, function(){
 
                        $(this).find('.down-list').slideUp(2000);
 
                        $('.dropdown-menu').each(function(i,item){
                            $(item).find('.menu').fadeTo(300, 1.0);
                        });
                    });
                }
            );

slideDown + fadeTo sur une liste

jQuery

Vue hybride

Discussions similaires

Partager

Partager