Menu Accordion (ouverture vers le haut)

**Kerweb** · 16/01/2009, 09h42

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

Merci d'avance pour ceux qui peuvent m'aiguiller

**le_chomeur** · 16/01/2009, 10h30

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 ?

**Kerweb** · 16/01/2009, 11h03

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

- 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)

**le_chomeur** · 16/01/2009, 12h25

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

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
 
<!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>

**Kerweb** · 16/01/2009, 12h43

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) ?

**le_chomeur** · 16/01/2009, 13h22

heu oui mais ce ne serait pas pratique , regarde l'original que tu m'a montré, il réagit exactement pareil

**Kerweb** · 16/01/2009, 13h39

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

En tout cas merci pour celui là, je commence à comprendre comment ça marche.

**le_chomeur** · 16/01/2009, 14h17

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

Menu Accordion (ouverture vers le haut)

JavaScript

Discussions similaires

Partager

Partager