[Javascript] Faire un menu dynamique

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

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, 12h07

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, 12h43

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

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

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, 12h59

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

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

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

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

ç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

Discussions similaires

Partager

Partager