erreur dans menu et décalage
Bonsoir,
je suis en train de faire un menu en php/sql, mais j'ai quelques problèmes.
Voici le code de la page "presentation.php" :
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
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="robots" content="index, follow" />
<meta name="keywords" content=" "/>
<meta name="description" content=" "/>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="css/style_menu.css" type="text/css" />
<script type="text/javascript" src="js/functions.js"></script>
<style type="text/css">
<!--
body {
margin-top: 0px;
}
-->
</style></head>
<body bgcolor="#333333">
<table width="1050" border="0" align="center" cellpadding="0" cellspacing="0" style="background: #000; height: 421px; min-height: 421px;">
<tr>
<td colspan="3" style="height: 50px; min-height: 50px; max-height: 50px;"> </td>
</tr>
<tr>
<td width="183" valign="top" style="width: 145px;"><?php include"menu/menu.php" ?></td>
<td width="850" style="width: 682px; background: #fff;">contenu</td>
<td width="17" style="background: #000;"> </td>
</tr>
</table>
</body>
</html> |
Voici le code du CSS :
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
| #menu {
width: 150px;
background: #000;
margin: 0;
}
.menu_niv2 { display: none; }
.menu_niv1 a {
display: block;
background: #333;
color: #fff;
text-decoration: none;
text-align: center;
}
.menu_niv1 a:hover {
display: block;
background: #666;
color: #fff;
text-decoration: underline;
text-align: center;
}
.menu_niv2 a {
color: #333;
background: #ccc;
text-decoration: none;
text-align: center;
display: block;
}
.menu_niv2 a:hover {
color: #333;
background: #aaa;
text-decoration: underline;
text-align: center;
display: block;
} |
Voici le code du js :
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
| function afficheMenu(menu) {
// generation du nom du sous menu que l'on veut gerer (afficher / cacher)
var sousMenu='sous' + menu;
// on recupere son etat
var etatSousMenu=document.getElementById(sousMenu).style.display;
// on cree un array de tous les menus de niveau 1, donc ceux qui ont la classe 'menu_niv1'
var listeNiv1=document.getElementsByClassName('menu_niv1');
// on boucle sur ces elements
for (var i=0; i<listeNiv1.length; i++) {
// on recupere l'id du menu courant
var idCourant=listeNiv1[i].id;
// si l'id courant est le meme que le menu que l'on a clique alors on traite le sous menu
// sinon on le cache et on passe au suivant
if (idCourant==menu) {
if (etatSousMenu=='block') {
document.getElementById(sousMenu).style.display='none';
} else {
document.getElementById(sousMenu).style.display='block';
}
} else {
// attention, si on cache, on doit cacher le sous menu du menu courant, il faut donc creer une nouvelle variable pour cacher celui-ci
var sousMenuTemp='sous' + idCourant;
document.getElementById(sousMenuTemp).style.display='none';
}
}
} |
Et, enfin le code du menu :
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
| <div id="menu">
<?php
require("identification/connexion_sql.php");
// on attaque le php ici
// dans un premier temps on recupere les menus de niveau 1 donc ceux qui ont l'id_parent egal a 0
$req1 = "SELECT id_menu, lib_menu FROM menus WHERE id_parent='0' ORDER BY ordre_menu" or die ("impossible d'effectuer la requête");
$rep1 = mysql_query($req1);
while($row1 = mysql_fetch_array($rep1)) {
// on affiche le menu de niveau 1
echo "<div class=\"menu_niv1\" id=\"menu".$row1['id_menu']."\" onclick=\"afficheMenu(this.id)\"><a href=\"#\">".$row1['lib_menu']."</a></div>\n";
// ensuite on fait une seconde requete pour chercher les sous menus de ce niveau, s'il y en a on les affiche, sinon on ne fait rien
$req2="SELECT id_menu, lib_menu FROM menus WHERE id_parent='".$row1['id_menu']."' ORDER BY ordre_menu" or die ("impossible d'effectuer la requête");
$rep2=mysql_query($req2);
$nb2=mysql_num_rows($rep2);
if (isset($nb2) && $nb2>0) {
echo "<div id=\"sousmenu".$row1['id_menu']."\" class=\"menu_niv2\">\n";
while ($row2=mysql_fetch_array($rep2)) {
echo "<a href=\"#\">".htmlentities($row2['lib_menu'])."</a>\n";
}
echo "</div>\n";
}
}
?>
</div> |
le premier problème est le décalage du menu par rapport à la zone blanche.
Normalement, le menu doit être à la même hauteur que la zone blanche, mais ce n'est pas le cas :(
Je ne comprends pas pourquoi il y a ce problème.
Autre problème, le menu ne fonctionne pas du tout sous IE.
Le résultat est visible ici : http://www.la-grange-sardieres.fr/si...esentation.php
Pensez-vous pouvoir m'aider ?
Merci beaucoup et bonne soirée
