Replier le menu horizontal [RESOLU]

Bonjour,

J'ai utilisé le menu déroulant horizontal pour mon site et il fonctionne parfaitement. J'y est juste apporté quelques modifications pour que mon les sous-menus ne soit pas tous de la même taille.

Seulement, je voudrait que le menu déroulant se replie lorsque je ne suis plus sur le menu.

voici une partie du code :

<style type="text/css">
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: relative;
top: 0;
left: 0;
z-index:1;
width: 100%;
}
#menu dl {
float: left;
margin: 0 1px;
}

/* Base du menu */
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
}
#menu dd {
border: 1px solid white;
}
#menu li {
text-align: center;
}
#menu li a, #menu dt a {
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}

/*Menu sans sous menu*/
#menu li a:hover, #menu dt a:hover {
background: white;
}
</style>
<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';}
}
//-->
</head>

ensuite j'appelle le fichier php contenant mon menu avec : require "menu.php";

J'ai réalisé ce menu selon votre modèle.

J'espère que vous avez assez de renseignements pour m'aider.
Merci
Modifié par popo (10 May 2006 - 16:27)

Bonjour popo,

Pour replier tes sous-menus, il faut rajouter à tes éléments dd :

onmouseover="javascript:montre('smenu_le_numero_du_sous_menu');" onmouseout="javascript:montre('');"

Voila

Merci, ça marche nickel !
Je mets le tag Résolu

Désolé, j'ai enlevé le tag résolu
parce que ça marche seulement sous IE (beurk, on refuse que j'installe firefox).

Je l'ai testé chez moi avec FireFox et le menu me décale les éléments qu'il y a en dessous vers la droite.

Juste après mon menu je mets du texte

MENU


<br/><br/>
<?
$date=date("d/m/Y");
$jour=array("dimanche", "lundi", "mardi", "mercredi", "jeudi", "vendredi", "samedi");
$numjour=date("w");
$mois=array("décembre", "janvier", "février", "mars", "avril", "mai", "juin", "juillet", "août", "septembre", "octobre", "novembre", "décembre");
$nummois=date("n");
$ladate="$jour[$numjour] ".date("j")." $mois[$nummois] ".date("Y");
echo "<center><b> Nous sommes le $ladate. Bienvenue sur le site de la Compagnie Zinzoline</b></center>";
$datebdd=date("Y-m-d");
?>

Ce qui affiche la date et un message de bienvenue. Ce texte est décalé.
http://tombraider5pc.free.fr/pbfirefox.jpg

Si vous pouvez m'aider ce serait sympa
Modifié par popo (27 Apr 2006 - 09:47)

Bonjour popo,

Je pense qu'il faut que tu superposes avec z-index

J'ai déjà un z-index dans mon css.

#menu {
position: relative;
top: 0;
left: 0;
z-index:1;
width: 100%;
}

Faut-il que j'en rajoute un ?
Dans ce cas, où ?

Bonjour Popo,

Dans le tuto du menu déroulant, Raphaël dit :

a écrit :

Attention aux décalages ! Les menus déroulants utilisent la propriété "display : block" et "display : none". Au départ et lorsqu'ils sont masqués, les sous-menus ont la valeur "none", cela signifie qu'ils n'occupent aucun espace dans la page.
En s'affichant, ils occupent alors un espace qui n'existait pas avant et peuvent "pousser" le reste de votre site !
C'est pourquoi, dans ces cas là, il faudra toujours positionner le menu et le site à part (chacun en position absolue) et leur donner un z-index (profondeur) différent, comme vous le voyez sur l'exemple de résultat. Dans ce cas, le menu sera placé au-dessus du reste du site et s'affichera sans le gêner.

Si tu as mis :

z-index: 1;

ton menu se retrouve dessous.

Il faut donc lui mettre un z-index supérieur au site.

il faut surtout que tu positionnes ul en absolute

OK Ca marche
Merci