Menu Accordion (ouverture vers le haut)

Version imprimable

16/01/2009, 09h42
Kerweb

Menu Accordion (ouverture vers le haut)

Hello,

J'aurais une petite question, est-ce que quelqu'un aurait une idée d'où je pourrait trouver un menu accordéon qui s'ouvre vers le haut et non vers le bas comme on trouve habituellement (rico, mootools, etc...) ?

L'idéal serait aussi qu'il soit activable depuis un lien "externe" (pas forcément un div dans la class concernée), je sais pas si je suis clair :lol:

Merci d'avance pour ceux qui peuvent m'aiguiller :P
16/01/2009, 10h30
le_chomeur

je vois a peu près ce que tu veux, mais il faudrait quelques informations complémentaire :

- veux tu passer par une librairie ?
- juste un script d'ouverture de div de ton menu ?
- horizontal / vertical ?
16/01/2009, 11h03
Kerweb

Dans ma tête c'était précis mais c'est vrai que j'ai pas mis beaucoup d'infos :lol:

- Menu vertical
- Pour avoir l'effet d'accordéon, il faut obligatoirement passer par une librairie nan ? Faudrait qu'il y ait un effet de transition et pas juste un changement "sec".
- Juste un script d'ouverture ça serait nickel :)

Edit : un truc dans ce style là en fait :
http://www.hedgerwow.com/360/mwd/acc...emo.php?page=3
(sauf que là il s'ouvre vers le bas)

attention c'est codé très rapidement , mais ça peut te donner une base :

Code:

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
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>Untitled Document</title>
		<style type="text/css">
			#menuAcc li{
				border:1px solid #666;
				width:150px;
				height:13px;
				overflow:hidden;
				padding:0px;
			}
			#menuAcc li h6{
				padding:0px;
				margin:0px;
			}
		</style>
		<script type="text/javascript">
			var ulCurrent = null;
			var animTimerOpen = null;
			var animTimerClose = null;
			var quotient = 0.2;
			var isOpen = null;
			var IsMinHeight = true;
 
			function openMenu(element){
				ulCurrent = element.parentNode;
				var heightLink = element.offsetHeight;
				var heightDiv = element.parentNode.getElementsByTagName('div')[0].offsetHeight;
				animTimerOpen = setInterval(function(){
					Expand(heightDiv+heightLink,heightLink)
					}, 25);
				}
 
 
			function Expand(MaxHeight,minHeight){
				var IsMaxHeight = false;
				if(parseInt(ulCurrent.offsetHeight)< MaxHeight){
					ulCurrent.style.height = parseInt(ulCurrent.offsetHeight) + 5 + 'px'; 
				}
				else if(!IsMaxHeight){
					IsMaxHeight = true;
				}
 
				if (isOpen != null) {
					if (parseInt(isOpen.offsetHeight) > minHeight) {
						IsMinHeight = false;
						isOpen.style.height = parseInt(isOpen.offsetHeight) - 9 + 'px';
					}
					else 
						if (!IsMinHeight) {
							IsMinHeight = true;
					}
				}
				if(IsMaxHeight && IsMinHeight){
					clearInterval(animTimerOpen);
					ulCurrent.style.height = MaxHeight + "px";
					if (isOpen != null) {
						isOpen.style.height = minHeight + 2 + "px";
					}
					isOpen = ulCurrent;
					quotient = 0.2 ;
				}
			}
		</script>
	</head>
	<body>
		<ul id="menuAcc">
			<li><h6 onclick="openMenu(this);">menu 1</h6>
				<div>et la tout le contenu <br />
	  				 et la tout le contenu <br />
					 et la tout le contenu <br />
					 et la tout le contenu <br />
					 et la tout le contenu <br />
 
				</div>
			</li>
			<li><h6 onclick="openMenu(this);">menu 1</h6>
				<div>et la tout le contenu <br />
	  				 et la tout le contenu <br />
					 et la tout le contenu <br />
					 et la tout le contenu <br />
					 et la tout le contenu <br />
				</div>
			</li>
			<li><h6 onclick="openMenu(this);">menu 1</h6>
				<div>et la tout le contenu <br />
	  				 et la tout le contenu <br />
					 et la tout le contenu <br />
					 et la tout le contenu <br />
					 et la tout le contenu <br />
				</div>
			</li>
			<li><h6 onclick="openMenu(this);">menu 1</h6>
				<div>et la tout le contenu <br />
	  				 et la tout le contenu <br />
					 et la tout le contenu <br />
					 et la tout le contenu <br />
					 et la tout le contenu <br />
				</div>
			</li>
			<li><h6 onclick="openMenu(this);">menu 1</h6>
				<div>et la tout le contenu <br />
	  				 et la tout le contenu <br />
					 et la tout le contenu <br />
					 et la tout le contenu <br />
					 et la tout le contenu <br />
				</div>
			</li>			
		</ul>
	</body>
</html>

16/01/2009, 12h43
Kerweb

Merci bien, j'ai quasiment pas de connaissance en JS mais le code est plus simple que ce que j'ai pu trouver, j'vais pouvoir regarder un peu ça.

Par contre est-ce que c'est possible avec ce type de menu de l'ouvrir vers le haut (et pas vers le bas) ?
16/01/2009, 13h22
le_chomeur

heu oui mais ce ne serait pas pratique , regarde l'original que tu m'a montré, il réagit exactement pareil :)
16/01/2009, 13h39
Kerweb

Oui oui, perso je trouve beaucoup plus pratique dans ce sens là aussi (c'est pas pour rien qu'ils sont quasi tous comme ça je pense ^^), mais la personne le voudrait dans l'autre sens. Enfin bon, déjà que j'ai du mal à expliquer le merdier ie6 avec lui :mouarf:

En tout cas merci pour celui là, je commence à comprendre comment ça marche. :)
16/01/2009, 14h17
le_chomeur

je l'ai fait rapidement donc il peut subsister quelque bug , n'hésite pas a remonter l'info :)