Comment obtenir un menu déroulant vers le haut uniquement ?

**anchain** · 15/03/2010, 17h48

Bonjour ,

Je viens vers vous pour une aide, j'ai beau cherché mais je bloque.
Je vous explique et mets ensuite le code à disposition.
Lorsque je survole le menu je voudrais que le menu se redimensionne uniquement vers le haut et que le bas du menu(bottom) ne bouge pas.

j'ai donc fais ceci :

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
<!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" lang="fr" xml:lang="fr">
  <head>
    <title>Menu</title>
    <style type="text/css">
    body{
			background #f3f3f3;
		}
		ul{
			margin: 300px 0 0 0;
			padding: 0;
			position: relative;
		}
 
		li{
			width: 150px;
			float: left;
			color: #191919;
		}
		li.test{
			position: relative;
			top: 0;
			bottom: 0;
			height: 50px;
			overflow: hidden;
			border: solid;
			margin: 0 0 0 10px;
		}
		li ul{
			margin: 0;
		}
    </style>
    <script src="http://jqueryjs.googlecode.com/files/jquery-1.3.js" type="text/javascript"></script>
		<script type="text/javascript">
		$(document).ready(function(){
 
			//When mouse rolls over
			$("li.test").mouseover(function(){
				$(this).stop().animate({height:'250px',top:'-50px',bottom:'0'},{queue:false, duration:600})
			});
 
			//When mouse is removed
			$("li.test").mouseout(function(){
				$(this).stop().animate({height:'50px',top:'0',bottom:'0'},{queue:false, duration:600})
			});
 
		});
		</script>
  </head>
  <body>
		<ul>
			<li class="test">
				<h3>A voir / A faire</h3>
				<div><ul>
						<li><a href="">Les incontournables</a></li>
						<li><a href="">Sorties/ Ev&egrave;nements</a></li>
						<li><a href="">Shopping</a></li>
						<li><a href="">Culture/Patrimoine</a></li>
				</ul></div>
			</li>
			<li class="test">
				<h3>Organiser son voyage</h3>
				<div><ul>
						<li><a href="">Les incontournables</a></li>
						<li><a href="">Sorties/ Ev&egrave;nements</a></li>
						<li><a href="">Shopping</a></li>
						<li><a href="">Culture/Patrimoine</a></li>
				</ul></div>
			</li>
		 </ul>
  </body>
</html>

comme vous pouvez le voir; lorsque vous survolez le menu , il s'étire vers le haut et en même temps vers le bas.
Comment fairre pour qu'il s'étire uniquement vers le haut.
j'ai joué sur le heigt, bottom et top mais rien n'y fait.
Quelqu'un a une solution

Merci déjà de 'avoir lu

**danielhagnoul** · 15/03/2010, 19h08

Bonsoir.

Code :

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

1
2
3
4
5
6
7
8
9
//When mouse rolls over
$("li.test").mouseenter(function(){
	$(this).stop().animate({height:"250px", top:"-=200px"},{queue:false, duration:600})
});
 
//When mouse is removed
$("li.test").mouseleave(function(){
	$(this).stop().animate({height:"50px", top:"0px"},{queue:false, duration:600})
});

**anchain** · 15/03/2010, 21h01

Merci Daniel, super

**anchain** · 16/03/2010, 12h19

Envoyé par danielhagnoul

Bonsoir.

Code :

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

1
2
3
4
5
6
7
8
9
//When mouse rolls over
$("li.test").mouseenter(function(){
	$(this).stop().animate({height:"250px", top:"-=200px"},{queue:false, duration:600})
});
 
//When mouse is removed
$("li.test").mouseleave(function(){
	$(this).stop().animate({height:"50px", top:"0px"},{queue:false, duration:600})
});

Le code fonctionne tres bien avec la version 1.3 de jquery;
mais au boulot la version 1.2.6 est utilisée; mettre à jour la version
demanderait trop de temps vu le nombre de pages impacté.

Du coup avec la version 1.2.6 de jquery , il y a ce message d'erreur qui s'affiche dans la console :

Code :

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

$("li.test").mouseenter is not a function

Qu'est ce qui ne va pas dans le code; que faut faut-il faire pour que le menu
fonctionne avec la versuion 1.2.6 de jquery ?

Merci

**Appollyon666** · 16/03/2010, 12h31

J'ai pas tester mais tu peux essayer de remplacer

Code :

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

1
2
3
4
 
$("li.test").mouseenter(function(){
	$(this).stop().animate({height:"250px", top:"-=200px"},{queue:false, duration:600})
});

par

Code :

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

1
2
3
 
 $("div.enterleave").bind("mouseenter",function(){
	$(this).stop().animate({height:"250px", top:"-=200px"},{queue:false, duration:600})

**danielhagnoul** · 16/03/2010, 20h38

Bonsoir.

Pour 1.2.6 -- version très en retard sur l'actuelle et beaucoup moins performante, il faut utiliser :

Code :

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

1
2
3
4
5
6
7
8
9
//When mouse rolls over
$("li.test").mouseover(function(){
	$(this).stop().animate({height:"250px", top:"-=200px"},{queue:false, duration:600})
});
 
//When mouse is removed
$("li.test").mouseout(function(){
	$(this).stop().animate({height:"50px", top:"0px"},{queue:false, duration:600})
});

Nota Bene : il n'est pas certain que 1.2.6 connaisse l'écriture "-=200px" ! Solution ?

1.2.6 !

**anchain** · 17/03/2010, 21h05

Envoyé par danielhagnoul

Bonsoir.

Pour 1.2.6 -- version très en retard sur l'actuelle et beaucoup moins performante, il faut utiliser :

Code :

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

1
2
3
4
5
6
7
8
9
//When mouse rolls over
$("li.test").mouseover(function(){
	$(this).stop().animate({height:"250px", top:"-=200px"},{queue:false, duration:600})
});
 
//When mouse is removed
$("li.test").mouseout(function(){
	$(this).stop().animate({height:"50px", top:"0px"},{queue:false, duration:600})
});

Nota Bene : il n'est pas certain que 1.2.6 connaisse l'écriture "-=200px" ! Solution ?

1.2.6 !

Merci Daniel,

J'ai pas encore testé ton code.
En remplaçant mouseover par hover(), ça fonctionne.

Comment obtenir un menu déroulant vers le haut uniquement ?

jQuery

Vue hybride

Discussions similaires

Partager

Partager