[Javascript] Faire un menu dynamique

**jenny50** · 28/02/2006, 10h48

Bonjour � tous,

Je viens vers vous pour que vous me guidiez dans ma cr�ation. Ca fait longtemps que je cherche � faire un menu verticale et je n'y arrive pas. L� j'ai trouv� un script qui correspond � ma recherche. Le hic, c'est que les menus et sous menus se trouvent dans une bdd.

Je pense que tout se joue dans la boucle de javascript?? mais jsai pas trop. Voici le code pouvez vous m'�clairer???

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
126
<!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="fr" lang="fr">
<head>
<title>Menu déroulant vertical</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;
}
dl#menu {
width: 15em;
}
dl#menu dt {
cursor: pointer;
margin: 2px 0;;
height: 20px;
line-height: 20px;
text-align: center;
font-weight: bold;
border: 1px solid gray;
background: #ccc;
}
dl#menu dd {
border: 1px solid gray;
}
dl#menu li {
text-align: center;
background: #fff;
}
dl#menu li a, dl#menu dt a {
color: #000;
text-decoration: none;
display: block;
border: 0 none;
height: 100%;
}
 
dl#menu li a:hover, dl#menu dt a:hover {
background: #eee;
}
 
#mentions {
font-family: verdana, arial, sans-serif;
position: absolute;
bottom : 200px;
left : 10px;
color: #000;
background-color: #ddd;
}
#mentions a {text-decoration: none;
color: #222;
}
#mentions a:hover{text-decoration: underline;
}
 
-->
</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="#">Sous-Menu 2.1</a></li>
					<li><a href="#">Sous-Menu 2.2</a></li>
 
					<li><a href="#">Sous-Menu 2.3</a></li>
				</ul>
			</dd>	
 
		<dt onclick="javascript:montre('smenu3');">Menu 3</dt>
			<dd id="smenu3">
				<ul>
					<li><a href="#">Sous-Menu 3.1</a></li>
					<li><a href="#">Sous-Menu 3.1</a></li>
 
					<li><a href="#">Sous-Menu 3.1</a></li>
					<li><a href="#">Sous-Menu 3.1</a></li>
					<li><a href="#">Sous-Menu 3.1</a></li>
					<li><a href="#">Sous-Menu 3.1</a></li>
				</ul>
			</dd>
 
		<dt onclick="javascript:montre('smenu4');">Menu 4</dt>
			<dd id="smenu4">
				<ul>
					<li><a href="#">Sous-Menu 4.1</a></li>
					<li><a href="#">Sous-Menu 4.1</a></li>
				</ul>
			</dd>
 
 
</dl>
</body>
</html>

**trattos** · 28/02/2006, 11h07

Je ne vois pas ou est le probl�me, tu affiches la valeur du menu correspondante dans ta base de donn�es � la place de "Sous menu" c'est tout!
- R�cup�ration
- Affichage
T'as juste deux trucs � faire!

**jenny50** · 28/02/2006, 11h43

ce que tu veux dire c'est que je mette la cl� de ma cat�gorie dans le javascript??

**jenny50** · 28/02/2006, 11h56

Je viens de r�ussir � composer mon menu le seul hic c'est les lien pour ouvrir ou fermer la menu (donc voir ou non les sous menus)

C'est un probl�me dans mon javascript???

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
<?php
require('public/fonctions.php');
$conn = g_connect();
$rep = '../img';
$essai = 'cours';
$sql = " SELECT cat_cle, cat_lib FROM categorie WHERE cat_lib like '%20%' ORDER BY cat_lib DESC ";
$qry = pg_query($conn, $sql);
$result = pg_fetch_assoc($qry);
?>
<head>
<title>Menu déroulant vertical</title>
<script type="text/javascript">
window.onload=montre;
function montre(id) {
	var d = document.getElementById(id);
	if (document.getElementById(<?=$result['cat_cle']?>))
   		{
		document.getElementById(<?=$result['cat_cle']?>).style.display='none';}
   		}
	if (d)
		{
		d.style.display='block';
		}
}
</script>
</head>
 
<body>
 
<dl id="menu">
	<?
	while ($result = pg_fetch_assoc($qry))
		{
	?>
      <dt onclick="javascript:montre('<?=$result['cat_cle']?>');"><?=$result['cat_lib']?></dt>
         <dd id="smenu2">
            <ul>
               <?
			   $sql2 = " SELECT doc_cle, doc_lib, doc_type, doc_file, doc_cat FROM documents WHERE doc_cat=".$result['cat_cle']." ORDER BY doc_lib DESC ";
			   $qry2 = pg_query($conn, $sql2);
			   while ($result2 = pg_fetch_assoc($qry2))
			   		{
					$clefile = $result2['doc_file'];
			   ?>
			   <li><a href="../admin/file.php?cle=<?=$result2['doc_cle']?>&oid=<?=$clefile?>&doc_type=<?=$result2['doc_type']?>" target="bodemer"><?=$result2['doc_lib']?></a></li>
			   <?
			   		}
				}
			   ?>
            </ul>
         </dd>   
</dl>
</body>
</html>

**jenny50** · 28/02/2006, 11h59

je ne comprend pas trop...
Tu pourrais me donner un exemple ou me corriger le code de mon dernier message

**Yobs** · 28/02/2006, 12h03

ajoute onMouseOut="javascript:montre('')" � ta balise dd

**jenny50** · 28/02/2006, 12h11

�a ne fait rien...
AVec le code pr�c�dent la visualisation me donne bien toutes mes rubriques et les sous rubriques qui l'accompagne.
Tout est ouvert ce que je ne souhaite pas, j'aimerai avoir que la premi�re d'ouverte (rubrique).
Et quand on clique sur la rubrique, ses sous rubrique se d�voilent ... �a �a ne fonctionne pas.

Alors que dans le statique �a fonctionnait.
Je dois avoir un pb avec �a :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script type="text/javascript">
window.onload=montre;
function montre(id) {
	var d = document.getElementById(id);
	if (document.getElementById(<?=$result['cat_cle']?>))
   		{
		document.getElementById(<?=$result['cat_cle']?>).style.display='none';}
   		}
	if (d)
		{
		d.style.display='block';
		}
}
</script>

[Javascript] Faire un menu dynamique

JavaScript

Vue hybride

Discussions similaires

Partager

Partager