menu et sous-menus "rétractables"

2 pièce(s) jointe(s)

Bonjour ! :D:D
Bon je dois créer un site web pendant mon stage en entreprise.
J'ai un petit problème avec mon menu car je ne connais pas super bien le java.

Voilà, je dois créer un menu "rétractable":

Si on ouvre "Notre société", "Nos produits" se ferme s'il est ouvert et vis-versa. Jusque là tout vas bien avec le "Switch Menu script- by Martial B".

Le problème c'est que je voudrais avoir le même effet entre "Chauffage-ECS" et "ENR-CLIM-VENT" qui sont des sous-menus de "Nos produits".
J'ai essayé de bidouiller mais sans succès.:(

Voici le code:Pièce jointe 61768:P
Merci d'avance pour vos réponse !

jquery propose des addons accordion ..

sinon fais une recherche sur le forum (css ou js) avec menu accordéon

Bonjour et bienvenue sur Developpez.com :D

comme on te l'a déjà dit, me semble-t-il, il s'agit de JavaScript et non de Java. Merci de ne pas prolonger ce genre d'ambiguïté :mrgreen:

Citation:

Envoyé par Leffeman60

Voici le code:Pièce jointe 61768

Merci également de poster ici la partie du code concerné : HTML généré et Javascript (et CSS si besoin) ;)

A+

Bonjour à vous!
Je vous remercie de votre compréhension, j'ai un peu de mal à naviguer sur le site (question d'habitude ^^)!
Et pour tout vous dire je savais même pas qu'il y avait une différence entre Java et JavaScript :roll:

Je n'arrive pas du tout à trouver les réponses à mes questions et c'est pas faute d'avoir cherché.

Dans mon "cahier des charges", le menu doit rester affiché même si on charge une page, il faut donc un cookie Switchmenu comme me le permet de faire ce script qui fonctionne:

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
var persistmenu="yes" //"yes" or "no". Make sure each SPAN content contains an incrementing ID starting at 1 (id="sub1", id="sub2", etc)
var persisttype="sitewide" //enter "sitewide" for menu to persist across site, "local" for this page only
 
if (document.getElementById){ //DynamicDrive.com change
document.write('<style type="text/css">\n')
document.write('.submenu{display: none;}\n')
document.write('</style>\n')
}
 
function SwitchMenu(obj){
	if(document.getElementById){
	var el = document.getElementById(obj);
	var ar = document.getElementById("masterdiv").getElementsByTagName("table"); //DynamicDrive.com change
		if(el.style.display != "block"){ //DynamicDrive.com change
			for (var i=0; i<ar.length; i++){
				if (ar[i].className=="submenu") //DynamicDrive.com change
				ar[i].style.display = "none";
			}
			el.style.display = "block";
		}else{
			el.style.display = "none";
		}
	}
}
 
function get_cookie(Name) { 
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) { 
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
 
function onloadfunction(){
if (persistmenu=="yes"){
var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
var cookievalue=get_cookie(cookiename)
if (cookievalue!="")
document.getElementById(cookievalue).style.display="block"
}
}
 
function savemenustate(){
var inc=1, blockid=""
while (document.getElementById("sub"+inc)){
if (document.getElementById("sub"+inc).style.display=="block"){
blockid="sub"+inc
break
}
inc++
}
var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
var cookievalue=(persisttype=="sitewide")? blockid+";path=/" : blockid
document.cookie=cookiename+"="+cookievalue
}
 
if (window.addEventListener)
window.addEventListener("load", onloadfunction, false)
else if (window.attachEvent)
window.attachEvent("onload", onloadfunction)
else if (document.getElementById)
window.onload=onloadfunction
 
if (persistmenu=="yes" && document.getElementById)
window.onunload=savemenustate
</script>

Ce que je voudrai faire c'est de créer un second cookie appelé Switchsousmenu par exemple pour créer le même effet au sous menu mais jusque là j'ai fait chou blanc :?

La voici mon HTML:

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
115
116
117
118
119
120
</head>
<body>
<div id="menu">
 
			<table id="masterdiv"><!-- MENU -->
 
				<!-- 1er cellule -->
				<tr><td>
				<a href="menu4.html">Accueil</a>
				</td></tr>
				<!-- FIN 1er cellule -->
 
				<!-- 2éme cellule -->
				<tr><td>
					<div id="sousmenu" onclick="SwitchMenu('sub1')"><font color="blue">Notre Société</font></div>
					<!-- 1er SOUS MENU -->
					<table class="submenu" id="sub1">
						<tr><td><!-- 1er sous-cellule -->
						<a href="menu4.html">Historique</a> 
						</td></tr>
						<tr><td><!-- 2éme sous-cellule -->
						<a href="menu4.html">Organigramme</a>
						</td></tr>
					</table>
					<!-- FIN 1er SOUS MENU -->
				</td></tr>
				<!-- FIN 2éme cellule -->
 
				<!-- 2bis cellule -->
				<tr><td>
				<a href="menu4.html">Nos Partenaires</a>
				</td></tr>
				<!-- FIN 2bis cellule -->
 
				<!-- 3éme cellule -->
				<tr><td>
					<div id="sousmenu" onclick="SwitchMenu('sub2')"><font color="blue">Nos Produits</font></div>
					<!-- 2éme SOUS MENU -->
					<table class="submenu" id="sub2">
						<tr><td><!-- 1er sous-cellule -->
						<a href="menu4.html">Pompes</a>
						</td></tr>
						<tr><td><!-- 2éme sous-cellule -->
						<a href="menu4.html">Régulation</a>
						</td></tr>
						<!-- 3éme sous-cellule -->
						<tr>
						<td><font color="red">Chauffage-ECS</font>
 
							<!-- 1er SOUS-SOUS-MENU -->
 
							<table>
								<tr><td>
								<a href="menu4.html">Chaudières</a>
								</td></tr>
								<tr><td>
								<a href="menu4.html">Production ECS</a>
								</td></tr>
								<tr><td>
								<a href="menu4.html">Brûleurs</a>
								</td></tr>
								<tr><td>
								<a href="menu4.html">Fumisterie</a>
								</td></tr>
								<tr><td>
								<a href="menu4.html">Planchers</a>
								</td></tr>
								<tr><td>
								<a href="menu4.html">Accessoires Hydrauliques</a>
								</td></tr>
							</table>
 
							<!-- FIN 1er SOUS-SOUS-menu -->
						</td></tr>
						<!-- FIN 3éme sous-cellule -->
 
						<!-- 4éme sous-cellule -->
						<tr>
						<td><font color="red">ENR-CLIM-VENT</font>
							<!-- 2éme SOUS-SOUS-MENU -->
 
							<table>
								<tr><td>
								<a href="menu4.html">PAC-Solaire</a>
								</td></tr>
								<tr><td>
								<a href="menu4.html">VMC-CLIM</a>
								</td></tr>
 
							</table>
 
							<!-- FIN 2éme SOUS-SOUS-MENU -->
						</td></tr>
						<!-- FIN 4éme sous-cellule -->
 
 
						<tr><td><!-- 5éme sous-cellule -->
						<a href="menu4.html">Entretien</a>
						</td></tr>
				</table>
				<!-- FIN 2éme SOUS-MENU -->
				</td></tr>
				<!-- FIN 3éme cellule -->
 
				<tr><td><!-- 4éme cellule -->
				<a href="menu4.html">Armoires</a>
				</td></tr>
 
				<tr><td><!-- 5éme cellule -->
				<a href="menu4.html">Services</a>
				</td></tr>
 
				<tr><td><!-- 6éme cellule -->
				<a href="menu4.html">Contacts</a>
				</td></tr>
			</table><!-- FIN MENU -->
 
</div>
</body>
</html>

Croyez-vous que se soit possible ?
Sinon qu'elles autres possibilités peuvent s'offrir à moi tout en respectant le "cahier des charges" ?

Merci à vous!

http://jquery.bassistance.de/accordion/demo/

Citation:

Envoyé par Leffeman60

Et pour tout vous dire je savais même pas qu'il y avait une différence entre Java et JavaScript :roll:

Java = langage serveur
JavaScript = langage client

A part l'orthographe, il n'y a aucun rapport entre les deux ;)

A+

Merci pour le lien SpaceFrog je savais pas que l'on pouvait faire des trucs aussi sympas en JAVASCRIPT. :D

Mais bon après X essais aussi tordu les uns que les autres, je n'arrive toujours pas à mon résultat:
- garder l'état exact du menu si le navigateur charge une autre page ou la même.
Le problème pour le moment jquery c'est des que je réactualise la page, le menu revient à son état par défaut :?
Que faudrait-il faire pour tomber sur le résultat voulu ?

soit ut le gères coté serveur pour attribuer le bon class pour qu'au chargement le bon menu soit déroulé,
soit tu fais une fonction sur le onload de la page et tu passes en paramètre get le menu à derouler