[Forum] Menu vertical avec ouverture automatique

**gregius** · 18/08/2006, 12h52

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

**Yoshio** · 18/08/2006, 13h24

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**gregius** · 18/08/2006, 13h37

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

**Yoshio** · 18/08/2006, 13h46

j'ai retouvé ce code pour l'alterance des tableau qui devrais t'aider :

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
$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 :

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

**gregius** · 18/08/2006, 14h18

merci pour la relecture

Je vois que tu es un bon citoyen wallon

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

**Yoshio** · 18/08/2006, 14h31

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)

**gregius** · 21/08/2006, 11h12

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

Je pensais à un menu du style :

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

**Yoshio** · 21/08/2006, 12h49

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 :

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

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

**gregius** · 22/08/2006, 16h33

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

**Yoshio** · 22/08/2006, 18h59

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

[Forum] Menu vertical avec ouverture automatique

EDI, CMS, Outils, Scripts et API PHP

Discussions similaires

Partager

Partager