Discussion :

[PMullier]

Bonjour,

Je précise que je débute dans la Grande Cuisine à base de HTML, PHP, CSS, JS... et progresse par essais successifs n'ayant eu pour formation que mes lectures (passionnantes) sur le web.

Dans le cadre d'un projet, j'ai besoin d'installer un menu vertical gauche. j'ai téléchargé le Menu Vertical Déroulant 2 de la page http://css.developpez.com/galerie/?p...-verticaux#MV1.

Le résultat visuel me convient bien, et le comportement du menu est impeccable sur la première page. Malheureusement, à chaque changement de page, il se remet à son état initial (fermé), c'est à dire ne montrant que les menus principaux et n'est plus "clickable"... impossible donc d'accéder aux sous menus...


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
38
39
40
41
42
43
44
45
46
47
48
49
/***************************************************
		MENU VERTICAL GAUCHE DEROULANT
***************************************************/
#menu{
	width:150px;
	margin:20px auto 0 auto;
}
.menu, .sousmenu{
	text-align:center;
}
.menu{
	height:18px;
	width:150px;
	padding:2px 0;
	background:#404040;
	color:#fff;
}
.sousmenu{
	height:18px;
	width:150px;
	padding:1px 0;
	background:#808080;
	color:#fff;
}
.menu a{
	display:block;
	width:100%;
	height:100%;
	color:#fff;
	font-family:arial,sans-serif;
	font-size:12px;
	font-weight:bold;
	text-decoration:none;
	background:#404040;
}
.sousmenu a{
	display:block;
	width:100%;
	height:100%;
	color:#fff;
	font-family:arial,sans-serif;
	font-size:12px;
	font-weight:bold;
	text-decoration:none;
	background:#808080;
}
.menu a:hover, .sousmenu a:hover, .menu a:active, .sousmenu a:active, .menu a:focus, .sousmenu a:focus{
	background:#ca0008;
}

le JS

Code javascript :

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
function afficheMenu(obj){
	var idMenu     = obj.id;
	var idSousMenu = 'sous' + idMenu;
	var sousMenu   = document.getElementById(idSousMenu);
	/*****************************************************/
	/** on cache tous les sous-menus pour n'afficher    **/
	/** que celui dont le menu correspondant est cliqué **/
	/** où 4 correspond au nombre de sous-menus         **/
	/*****************************************************/
	for(var i = 1; i <= 4; i++){
		if(document.getElementById('sousmenu' + i) && document.getElementById('sousmenu' + i) != sousMenu){
			document.getElementById('sousmenu' + i).style.display = "none";
		}
	}
	if(sousMenu){
		//alert(sousMenu.style.display);
		if(sousMenu.style.display == "block"){
			sousMenu.style.display = "none";
		}
		else{
			sousMenu.style.display = "block";
		}
	}
}

et le HTML d'appel

Code html :

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
<div id="menu">
	<div class="menu" id="menu1" onclick="afficheMenu(this)">
		<a href="#">Infos</a>
	</div>
	<div id="sousmenu1" style="display:none">
		<div class="sousmenu">
			<a href="Info_1.php">Infos Générales</a>
		</div>
		<div class="sousmenu">
			<a href="Info_2.php">Besoins</a>
		</div>
		<div class="sousmenu">
			<a href="Info_3.php">Activité</a>
		</div>
	</div>
	<div class="menu" id="menu2" onclick="afficheMenu(this)">
		<a href="#">Menu 2</a>
	</div>
	<div id="sousmenu2" style="display:none">
		<div class="sousmenu">
			<a href="#">Sous-Menu 2.1</a>
		</div>
		<div class="sousmenu">
			<a href="#">Sous-Menu 2.2</a>
		</div>
		<div class="sousmenu">
			<a href="#">Sous-Menu 2.3</a>
		</div>
	</div>
	<div class="menu" id="menu3">
		<a href="#">Menu 3</a>
	</div>
	<div class="menu" id="menu4" onclick="afficheMenu(this)">
		<a href="#">Menu 4</a>
	</div>
	<div id="sousmenu4" style="display:none">
		<div class="sousmenu">
			<a href="#">Sous-Menu 4.1</a>
		</div>
		<div class="sousmenu">
			<a href="#">Sous-Menu 4.2</a>
		</div>
		<div class="sousmenu">
			<a href="#">Sous-Menu 4.3</a>
		</div>
		<div class="sousmenu">
			<a href="#">Sous-Menu 4.4</a>
		</div>
		<div class="sousmenu">
			<a href="#">Sous-Menu 4.5</a>
		</div>
	</div>
</div>

J'ai fait de vaines recherches jusqu'ici, si quelqu'un pouvait me mettre sur la voie, cela serait sympa...

Merci

[NoSmoking]

Bonjour,

Le mieux serait de le gérer coté serveur en modifiant le style.
Tu peux également te servir des cookies ou autre localStorage.
Tu peux également au chargement de ta page regarder en fonction de l'adresse de la page quel est le menu concerné.

[PMullier]

Merci NoSmoking pour les pistes !

Mon problème est mon faible niveau... La première piste revient elle à incorporer le PHP du menu dans chaque page concernée ?

Cookies et autre localStorage ne me disent rien à ce jour.

Je ne vois pas comment la récuperation de l'adresse de la page pourrait m'aider...

Comme tu vois, on est pas au niveau zéro mais pas loin...

Patrick

[NoSmoking]

Coté serveur il suffit d'affecter au menu pointant sur la page en cours le style qui va bien voir même de désactiver ce lien ce qui est plus mieux.

Pour le reste il y à
- la faq
- les cours
mais là on parle javascript et non plus CSS ou HTML donc il te faudra poster sur
- le Forum javascript.

[PMullier]

Merci à toi...

Tout un programme effectivement... Je vais me laisser du temps et passer a autre chose en attendant.

Patrick