[Forum] Menu vertical avec ouverture automatique

Version imprimable

18/08/2006, 12h52
gregius

[Forum] Menu vertical avec ouverture automatique

Bonjour,

J'ai actuellement un menu vertical statique avec des liens du style index.php?id_page=100

Mes pages sont donc toutes reprises dans une table sql
J'aimerai que ce menu deviennent dynamique c'est à dire que le menu se développe à l'endroit de la page en cours et qu'il ferme les autres menu.
mon site se trouve à l'adresse suivante : http://cpdt.wallonie.be
Les solutions javascript que j'ai essayée permettait au menu de développer plus ou moins les différentes parties, mais il refermait tout dès qu'on chargeait une page étant donné que c'est une structure php...
Il faudrait qu'il retienne l'id de la page du liens cliqué et qu'il s'ouvre à cet endroit...

Quelqu'un pourrait-il m'aider... ça doit être un truc avec des get et post m'a-t-on dit mais je n'y comprend rien...
MErci

Greg
18/08/2006, 13h24
Yoshio
N'oublie pas que le PHP est un script coté serveur !

Par contre tu pourrais faire quelques chose en le couplant a du CSS.

Genre deux classe :
Code:

1 2 3 4 5 .extend { } .normal { }
Tu fait un script pour savoir quel classe tu dois utiliser dans ton menu (comme les tableau qui change de couleur a chaque ligne)

Si tu dois étendre tu met .extend et tu recup les lien du bloc
Sinon ben tu met .normal et tu fait plus rien.

Doit y avoir surement d'autre moyens pour le faire
18/08/2006, 13h37
gregius

euuuh, tu pourrais pas donner un exemple?
J'suis assez débutant avec le php...

j'ai retouvé ce code pour l'alterance des tableau qui devrais t'aider :
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 $table_prefix = 'phpbb_'; $sql = "REQUETE SQL"; $result = mysql_query($sql); // Initialisation des 2 couleur possible (lie aux CSS) $couleur_ligne = array('postCouleur1','postCouleur2'); echo '<div class="blockHeader">Les 5 derniers topics</div>'; while($data = mysql_fetch_array($result)) { $color = $couleur_ligne[$i % 2]; $postTitle = '<a href='.$phpbb_root_path.'viewtopic.php?t='.$data['topic_id'].'>'.$data['topic_title'].'</a>'; $date = date('d/m/y', $data['topic_time']); $profile = '<a href="'.$phpbb_root_path.'profile.php?mode=viewprofile&u='.$data['user_id'].'">'.$data['username'].'</a>'; $comment ='<a href="'.$phpbb_root_path.'viewtopic.php?t='.$data['topic_id'].'">'.$data['topic_replies'].' commentaire(s)</a>'; echo '<div class="'.$color.'">'; echo '<p class="postTitre">'.$postTitle.'</p>'; echo '<p class="postAuteur">Post par '.$profile.' le '.$date.' - '.$comment.'</p>'; echo '</div>'; if ($i >= 5) { break; } $i++; }
L'exemple servait a récupérer les dernier topic d'un forum phpbb et les afficher sur le site sous forme de tableau avec alternance de couleur

En passant :

Citation:

En 2005, le gouvernement Gouvernement wallon a décidé de compléter cette l'offre existante en confiant

http://cpdt.wallonie.be/index.php?id_page=4

Il y a un léger problème dans cette phrase ...

18/08/2006, 14h18
gregius

merci pour la relecture ;)
Je vois que tu es un bon citoyen wallon :lol:
Par contre, moi je suis encore un piètre webmaster...
Je ne m'y retrouve pas avec ton code...
J'ai l'impression que cela ne résoudra pas le problème lié au fait que étant donné que php est un langage serveur ( ;) ) à chaque chargement, il va fermer le menu
18/08/2006, 14h31
Yoshio

Normalement ca ne va pas fermer le menu mais le remettre à jour a chaque chargmeent.

Tu as dit que tes pages étaient stockée dans ta base de données.

Il suffirait que tu récupère quel page l'utilisateur est en train de visiter et d'appliquer au menu la class adéquate.

1- tu récupères les info pour le menu (page, lien, ...) via la db
2- tu récupères l'id de ta page actuelle
3- tu construit le menu :
4- en fonction du point 2 on affiche ou non les sous menu

J'ai trouvé vite fait un lien qui devrais au mieux t'aider car je epnse qu'il fait exactement ce que tu veux faire :
http://www.gphp.net/articles,12.php

Mais j'essaye de te donner une solution avec php/css car ca serait plutot du javascript pour ce genre de chose (mais je n'y connais rien a ce language et je ne veux aps l'apprendre lol)

Citation:

Envoyé par omura

Normalement ca ne va pas fermer le menu mais le remettre à jour a chaque chargmeent.

Tu as dit que tes pages étaient stockée dans ta base de données.

Il suffirait que tu récupère quel page l'utilisateur est en train de visiter et d'appliquer au menu la class adéquate.

et en code, ça donnerait quoi? parce que je n'y arrive pas...:oops:

Je pensais à un menu du style :

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
121
122
123
124
125
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Vertical expanding menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 
<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) {
		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
}
//-->
</script>
 
 
<style type="text/css">
<!-- 
body {
margin: 0;
padding: 0;
background: white;
font: 80% verdana, arial, sans-serif;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute;
top: 0;
left: 0;
}
#menu {
width: 15em;
}
#menu dt {
cursor: pointer;
margin: 2px 0;;
height: 20px;
line-height: 20px;
text-align: center;
font-weight: bold;
border: 1px solid gray;
background: #ccc;
}
#menu dd {
border: 1px solid gray;
}
#menu li {
text-align: center;
background: #fff;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
border: 0 none;
height: 100%;
}
 
#menu li a:hover, #menu dt a:hover {
background: #eee;
}
 
.mentions {
position: absolute;
top : 300px;
left : 10px;
color: #000;
background-color: #ddd;
}
-->
</style>
</head>
 
<body>
 
<dl id="menu">
 
		<dt onclick="javascript:montre();"><a href="#">Menu 1</a></dt>
 
		<dt onclick="javascript:montre('smenu2');">Menu 2</dt>
			<dd id="smenu2">
				<ul>
					<li><a href="#">Sub Menu 2.1</a></li>
					<li><a href="#">Sub Menu 2.2</a></li>
 
					<li><a href="#">Sub Menu 2.3</a></li>
				</ul>
			</dd>	
 
		<dt onclick="javascript:montre('smenu3');">Menu 3</dt>
			<dd id="smenu3">
				<ul>
					<li><a href="#">Sub Menu 3.1</a></li>
					<li><a href="#">Sub Menu 3.1</a></li>
 
					<li><a href="#">Sub Menu 3.1</a></li>
					<li><a href="#">Sub Menu 3.1</a></li>
					<li><a href="#">Sub Menu 3.1</a></li>
					<li><a href="#">Sub Menu 3.1</a></li>
				</ul>
			</dd>
 
		<dt onclick="javascript:montre('smenu4');">Menu 4</dt>
			<dd id="smenu4">
				<ul>
					<li><a href="#">Sub Menu 4.1</a></li>
					<li><a href="#">Sub Menu 4.1</a></li>
				</ul>
			</dd>
 
 
</dl>
 
 
</body>
</html>

mais dans ce type de menu, le tout reste à ce que quand on clique sur le liens, ce menu doit rester ouvert au bon endroit...

Faire un menu comme ca simplement en php ce n'est pas possible. Tu est obliger de le mettre avec du javascript.

J'ai vite fait un petit script qui pourra te mettre sur la voie. Personellement je ne touche pas au javascript.

En php / css ca donnerais ceci :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<link href="test.css" media="screen" rel="stylesheet" />
</head>
<?php
// Tableau que tu recup à partir de ta db
$menuArray = array ('Menu 1' => array(
						'Acceuil' => 'lien',
						'Compte' => 'lien',
						'Inscription' => 'lien'
					),
					'Menu 2' => array(
						'Euh' => 'lien',
						'Euh 2' => 'lien',
					),
);
 
// Groupe actuel
$group = 'Menu 1';
// Page actuel
$page = 'Compte';
 
// Début du menu
$menu = "<ul id=\"menu\">\n";
 
// On continue le menu
foreach ($menuArray as $id => $info) {
	// On affichhe les groupe
	$menu .= '<li class="normal">'.$id."</li>\n";
 
	// Si le groupe == du grouep courant (sinon on fait rien)
	if ($group == $id) {
		foreach ($info as $label => $link) {
			if ($page == $label) {
				$bold = '<span class="currentPage">';
				$bold .= $label;
				$bold .= '</span>';
				$label = $bold;
			}
			$menu .= '<li class="extend"><a href="'.$link.'">'.$label."</a></li>\n";
		}
	}
}
 
$menu .= "</ul>\n";
 
echo $menu;
?>
<body>
</body>
</html>

avec un peu de css :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
ul#menu {
	text-decoration: none;
	list-style-type: none;
}
 
.normal {
	font-weight: bold;
	font-variant: small-caps;
}
 
.extend {
	list-style: inside square;
	text-indent: 20px;
 
}
 
.currentPage {
	font-weight: bold;
	text-decoration: underline;
}

Tu devra surement couplé ce script avec du javascript pour que tu obtienne ce que tu veux.

Arrange le tableau comme tu le veux. Je saurais aps t'en dire plsu car je ne sait aps comment est construit ta db.

22/08/2006, 16h33
gregius

ma DB est construite selon le tutoriel http://pbnaigeon.developpez.com/tuto...ite-dynamique/

En fait j'ai une table "pages" avec les colonnes suivantes
ID, titre, mots-clés, descriptions,contenu, id_parent

la colonne "contenu" reprenant le lien absolu de la page
22/08/2006, 18h59
Yoshio

bah tu as toutes les info nécessaire pour alors suffit de chercher un ptit peu pour bien remplir le tableau.