Fixer automatiquement la hauteur

**schwinny** · 31/03/2009, 14h43

Bonjour a tous.

j'ai crée un menu deroulant avec mootools.

Tout ca marche mais je voudrais pouvoir regler a la volée la hauteur du menu qui se deroule.
j'ai essayé avec

Code :

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

.tween('height', 'auto')

mais cela ne fais rien du tout.

quelqu'un sait comment faire pour regler le soucis?

j'utilise la derniere version du mootools ainsi que safari et firefox 3

voici le code de la page 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
<!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="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link rel="stylesheet" href="demo.css" type="text/css" />
	<script type="text/javascript" src="mootools-1.2.1-core-nc.js"></script>
	<script type="text/javascript" src="demo.js"></script>
	<title>Menu deroulant - Demo Mootools</title>
</head>
<body>
 
		<div class="derouleMoi">	
 
			<span><strong>Menu</strong></span>
			<div>
				<a href="">Sous Menu 1</a>
				<a href="">Sous Menu  2</a>
				<a href="">Sous Menu  3</a>
			</div>
		</div>
 
		<div class="derouleMoi">	
			<span><strong>Menu2</strong></span>
			<div>
				<a href="">Sous Menu 1</a>
				<a href="">Sous Menu 2</a>
				<a href="">Sous Menu 3</a>
			</div>
		</div>
 
		<div class="derouleMoi">	
			<span><strong>Menu3</strong></span>
			<div>
				<a href="">Sous Menu 1</a>
				<a href="">Sous Menu 2</a>
				<a href="">Sous Menu 3</a>
			</div>
		</div>
	</div>
 
 
 
</body>
</html>

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
div.floated
{
	width: 400px;
	float: left;
	margin-left: 1em;
}
 
 
.derouleMoi
{
	float: left;
	/*Taille de depart*/
	width: 120px;
	height: 20px;
	/*masque les sous menus*/
	overflow: hidden;
 
	background-color:silver;
}
 
 
 
.hauteurtest
	{
	height: 1150px;}
 
 
.derouleMoi span, .derouleMoi a
{
	display: block;
	padding: 0 3px;
}
 
.derouleMoi a:hover
{
	background: .f5f5f5;
}

et surtout voici le code mootools

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
//http://mootools.net/docs/Fx/Fx.Tween

window.addEvent('domready', function(){

	
	$$('.derouleMoi').addEvents(
		{
			'mouseenter': function()
			{
				this.set
					('tween',
						{
							duration: 500,
							transition: Fx.Transitions.Bounce.easeOut
						}
					).tween('height', '200px');
			},
			
			'mouseleave': function()
			{
				this.set('tween', {duration: 500,transition: Fx.Transitions.Bounce.easeOut}).tween('height', '20px');
			}
	});
	

	
});

Fixer automatiquement la hauteur

Bibliothèques & Frameworks

Vue hybride

Discussions similaires

Partager

Partager