Sens du déroulement du menu

**pulsefight** · 10/03/2009, 15h23

Bonjour à tous !

Voilà, je fais mes premiers pas en javascript et je me pose une question sur un menu que j'ai pris sur le net. Le menu se déroule vers le bas et je souhaiterais savoir comment faire pour qu'il se déroule vers la droite...

Je vous laisse mon exemple et merci...de votre aide.

Code 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
<!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" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 
	<title>Smooth Animated jQuery Menu</title>
 
	<link rel="stylesheet" href="animated-menu.css"/>
 
	<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.js" type="text/javascript"></script>
	<script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
	<script src="animated-menu.js" type="text/javascript"></script>
</head>
 
<body>
 
	<p>Rollover a menu item to expand it.</p>
 
	<ul>
		<li class="green">
			<p><a href="#">Home</a></p>
			<p class="subtext">The front page</p>
		</li>
		<li class="yellow">
			<p><a href="#">About</a></p>
			<p class="subtext">More info</p>
		</li>
		<li class="red">
			<p><a href="#">Contact</a></p>
			<p class="subtext">Get in touch</p>
		</li>
		<li class="blue">
			<p><a href="#">Submit</a></p>
			<p class="subtext">Send us your stuff!</p>
		</li>
		<li class="purple">
			<p><a href="#">Terms</a></p>
			<p class="subtext">Legal things</p>
		</li>
	</ul>
 
</body>
</html>

Code 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
body{
	font-family:"Lucida Grande", arial, sans-serif;
	background:#F3F3F3;
}
 
ul{
	margin:0;
	padding:0;
}
 
li{
	width:100px;
	height:50px;
	float:Aucune;
	color:#191919;
	text-align:center;
	overflow:hidden;
}
 
a{
	color:#FFF;
	text-decoration:none;
}
 
p{
	padding:0px 5px;
}
 
	.subtext{
		padding-top:15px;
	}
 
/*Menu Color Classes*/
.green{background:#6AA63B url('images/green-item-bg.jpg') top left no-repeat;}
.yellow{background:#FBC700 url('images/yellow-item-bg.jpg') top left no-repeat;}
.red{background:#D52100 url('images/red-item-bg.jpg') top left no-repeat;}
.purple{background:#5122B4 url('images/purple-item-bg.jpg') top left no-repeat;}
.blue{background:#0292C0 url('images/blue-item-bg.jpg') top left no-repeat;}

Code 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
$(document).ready(function(){
 
	//Fix Errors - http://www.learningjquery.com/2009/01/quick-tip-prevent-animation-queue-buildup/
 
	//Remove outline from links
	$("a").click(function(){
		$(this).blur();
	});
 
	//When mouse rolls over
	$("li").mouseover(function(){
		$(this).stop().animate({height:'150px'},{queue:false, duration:600, easing: 'easeOutBounce'})
	});
 
	//When mouse is removed
	$("li").mouseout(function(){
		$(this).stop().animate({height:'50px'},{queue:false, duration:600, easing: 'easeOutBounce'})
	});
 
});

Merci encore !

**Bovino** · 10/03/2009, 15h30

Code :

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

1
2
3
4
5
6
7
8
$("li").mouseover(function(){
	$(this).stop().animate({height:'150px'},{queue:false, duration:600, easing: 'easeOutBounce'})
});
 
//When mouse is removed
$("li").mouseout(function(){
	$(this).stop().animate({height:'50px'},{queue:false, duration:600, easing: 'easeOutBounce'})
});

Change le height en width ?

**pulsefight** · 12/03/2009, 17h10

Merci pour la réponse...

**Cocojune** · 25/04/2009, 18h55

Bonjour !

Je fais également mes premiers pas en javascript... Est ce que quelqu'un peut m'expliquer comment faire pour que le menu se deroule vers le haut (en utilisant le même code que dans les messages ci dessus).

Merci pour votre aide.

Sens du déroulement du menu

jQuery

Vue hybride

Discussions similaires

Partager

Partager