Bonjour à toutes et à tous,
Je suis en train de faire un site(sur Easyphp) où j'ai placé un menu déroulant horizontal (suivant un tuto ALSACREATION) sur chacune des pages. Le menu fonctionnerait bien, si ce n'était la "volatilité" des sous-menus : à peine la souris passée dessus, voilà qu'ils disparaissent. On n'a pas le tant de cliquer dessus. Voici le script :
quel code dois-je modifier ou rajouter pour palier à ce problème de volatilité.
Merci d'avance de me venir en aide.
Modifié par MARTEGAU (25 Jan 2009 - 09:24)
Je suis en train de faire un site(sur Easyphp) où j'ai placé un menu déroulant horizontal (suivant un tuto ALSACREATION) sur chacune des pages. Le menu fonctionnerait bien, si ce n'était la "volatilité" des sous-menus : à peine la souris passée dessus, voilà qu'ils disparaissent. On n'a pas le tant de cliquer dessus. Voici le script :
<!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" >
<head>
<title>Menu Horizontal</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" media="screen">
/*pour positionner les sous-menus avec IE7*/
*
{
margin: 0;
padding: 0;
}
/*positionne le menu et modifie les caractères*/
body
{
margin: 0;
padding: 0;
font-family:arial,"times new roman",verdana, sans-serif;
font-size:0.7em;
}
/*ressere les items et place les sous menus sous les menus*/
dl, dt, dd, ul, li
{
margin: 0;
padding: 0;
list-style-type: none;/*supprime les puces*/
}
/* placement du menu, positionnement horizontal à modifier selon vos besoins */
#menu_general
{
position: absolute;
top: 0%;
left: 0%;
width: 100%; /* correction pour Opera */
}
/*les 3 items ci-dessous placent les éléments à l'horizontale*/
#menu_general dl
{
float: left;
width: 7%;/*largeur des items*/
}
/*présentation sous forme de tableau*/
#menu_general dt
{
cursor: pointer;
text-align: center;
border: 1px inset white;
margin: 1px;
background-color:#d0d0f3;
height:30px;
}
/*présentation des sous menus*/
#menu_general dd
{
display: none;
border: 1px solid gray;
}
#menu_general li
{
text-align: center;
background: #d2e792;/*couleur de fond des sous-menus*/
}
/*décoration des menus et sous-menus*/
#menu_general li a, #menu_general dt a
{
color: #7e241f;/*couleur des caractères menus et sous-menus*/
text-decoration: none;
display: block;
border: 0 none;
}
/*couleur de fond des rubriques au passage de la souris*/
#menu_general li a:hover, #menu_general li a:focus, #menu_general dt a:hover, #menu_general dt a:focus
{
background: #eee;
}
#menu_general
{
left : 10px;
color: #7e241f;/*couleur des caractères des items liés aux sous-menus*/
padding:5px;
}
#menu_general
{
position:absolute;
z-index:1;
}
dd
{
position:absolute;
z-index:100;
}
</style>
</head>
<body>
<?php
$langue=$_GET['lang'];
require("../pages_finales/decide-lang-index2.php");
?>
<div id="menu_general">
<dl>
<!-- Accueil-->
<dt onmouseover="javascript:montre();"><p><a href=<?php echo REF_ACCUEIL_MENUH ?> title=<?php echo TIT_ACCUEIL_MENU ?>><?php echo TEXT_ACCUEIL_MENU ?></a></p></dt>
</dl>
<dl>
<!-- Historique-->
<dt onmouseover="javascript:montre();"><p><a href=<?php echo REF_HISTORIC_MENU ?> title=<?php echo TIT_HISTORIC_MENU ?>><?php echo TEXT_HISTORIC_MENU ?></a></p></dt>
</dl>
<dl>
<!-- Activités-->
<dt onmouseover="javascript:montre('smenu1');"><?php echo TEXT_ACTIVITES_MENU ?></dt>
<dd id="smenu1"onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre();">
<ul>
<!-- Chant-->
<li><p><a href=<?php echo REF_CHANT_MENUH ?> title=<?php echo TIT_CHANT_MENU ?>><?php echo TEXT_CHANT_MENU ?></a></p></li>
<!-- Costume-->
<li><p><a href=<?php echo REF_COSTUME_MENU ?> title=<?php echo TIT_COSTUME_MENU ?>><?php echo TEXT_COSTUME_MENU ?></a></p></li>
<!-- Cuisine-->
<li><p><a href=<?php echo REF_CUISINE_MENU ?> title=<?php echo TIT_CUISINE_MENU ?>><?php echo TEXT_CUISINE_MENU ?></a></p></li>
<!-- Langue-->
<li><p><a href=<?php echo REF_LANGUE_MENU ?> title=<?php echo TIT_LANGUE_MENU ?>><?php echo TEXT_LANGUE_MENU ?></a></p></li>
<!-- Ecole de danse-->
<li><p><a href=<?php echo REF_ED_MENU ?> title=<?php echo TIT_ED_MENU ?>><?php echo TEXT_ED_MENU ?></a></p></li>
<!--Le folklore du jeune âge-->
<!--<li><p><a href=<?php echo REF_FJA_MENU ?> title=<?php echo TIT_FJA_MENU ?>><?php echo TEXT_FJA_MENU ?></a></p></li>-->
<!--<li><a href=<?php echo REF_PROMO_MENU ?> title=<?php echo TIT_PROMO_MENU ?>><?php echo TEXT_PROMO_MENU ?></a></li>-->
</ul>
</dd>
</dl>
<dl>
<!-- Ballet Folklorique-->
<dt onmouseover="javascript:montre();"><p><a href=<?php echo REF_BALLET_MENU ?> title=<?php echo TIT_BALLET_MENU ?>><?php echo TEXT_BALLET_MENU ?></a></p></dt>
</dl>
<dl>
<!-- Spectacles à la carte-->
<dt onmouseover="javascript:montre('smenu2');"><?php echo TEXT_SPECTACLES_MENU ?></dt>
<dd id="smenu2" onmouseover="javascript:montre('smenu2');"onmouseout="javascript:montre();">
<ul>
<!-- Animations-->
<li><p><a href="<?php echo REF_ANIM_MENU ?>" title=<?php echo TIT_ANIM_MENU ?>><?php echo TEXT_ANIM_MENU ?></a></p></li>
<!-- Ballet Folklorique-->
<li><p><a href="<?php echo REF_BF_MENU ?>" title=<?php echo TIT_BF_MENU ?>><?php echo TEXT_BF_MENU ?></a></p></li>
<!-- Ballet théâtre-->
<li><p><a href="<?php echo REF_THEATRE_MENU ?>" title=<?php echo TIT_THEATRE_MENU ?>><?php echo TEXT_THEATRE_MENU ?></a></p></li>
<!-- Concert baleti-->
<li><p><a href="<?php echo REF_CONCERT_MENU ?>" title=<?php echo TIT_CONCERT_MENU ?>><?php echo TEXT_CONCERT_MENU ?></a></p></li>
<!-- Veillée Calendale-->
<li><p><a href="<?php echo REF_CALEND_MENU ?>" title=<?php echo TIT_CALEND_MENU ?>><?php echo TEXT_CALEND_MENU ?></a></p></li>
<!-- Animations scolaires-->
<li><p><a href="<?php echo REF_SCOL_MENU ?>" title=<?php echo TIT_SCOL_MENU ?>><?php echo TEXT_SCOL_MENU ?></a></p></li>
</ul>
</dd>
</dl>
<dl>
<!-- Fêtes populaires-->
<dt onmouseover="javascript:montre('smenu3');"><?php echo TEXT_FETEPOP_MENU ?></dt>
<dd id="smenu3" onmouseover="javascript:montre('smenu3');"onmouseout="javascript:montre();">
<ul>
<!-- Les Rois-->
<li><p><a href=<?php echo REF_ROIS_MENU ?> title=<?php echo TIT_ROIS_MENU ?>><?php echo TEXT_ROIS_MENU ?></a></p></li>
<!-- Carnaval-->
<li><p><a href=<?php echo REF_CARNAVAL_MENU ?> title=<?php echo TIT_CARNAVAL_MENU ?>><?php echo TEXT_CARNAVAL_MENU ?></a></p></li>
<!-- La St Marc-->
<li><p><a href=<?php echo REF_STMARC_MENU ?> title=<?php echo TIT_STMARC_MENU ?>><?php echo TEXT_STMARC_MENU ?></a></p></li>
<!-- Feux St Jean-->
<li><p><a href=<?php echo REF_STJEAN_MENU ?> title=<?php echo TIT_STJEAN_MENU ?>><?php echo TEXT_STJEAN_MENU ?></a></p></li>
<!-- Fête des pécheurs-->
<li><p><a href=<?php echo REF_PECHEUR_MENU ?> title=<?php echo TIT_PECHEUR_MENU ?>><?php echo TEXT_PECHEUR_MENU ?></a></p></li>
<!-- Noël-->
<li><p><a href=<?php echo REF_NOEL_MENU ?> title=<?php echo TIT_NOEL_MENU ?>><?php echo TEXT_NOEL_MENU ?></a></p></li>
</ul>
</dd>
</dl>
<dl>
<!-- Festival de Martigues-->
<dt onmouseover="javascript:montre();"><p><a href=<?php echo REF_FESTIVAL_MENU ?> title=<?php echo TIT_FESTIVAL_MENU ?>><?php echo TEXT_FESTIVAL_MENU ?></a></p></dt>
</dl>
<dl>
<!-- La Boutique, CD DVD-->
<dt onmouseover="javascript:montre();"><p><a href=<?php echo REF_CDVD_MENU ?> title=<?php echo TIT_CDVD_MENU ?>><?php echo TEXT_CDVD_MENU ?></a></p></dt>
</dl>
<dl>
<!-- Liens-->
<dt onmouseover="javascript:montre();"><p><a href=<?php echo REF_LIENS_MENU ?> title=<?php echo TIT_LIENS_MENU ?>><?php echo TEXT_LIENS_MENU ?></a></p></dt>
</dl>
<dl>
<!-- Les contacts-->
<dt onmouseover="javascript:montre();"><p><a href=<?php echo REF_CONTACT_MENU ?> title=<?php echo TIT_CONTACT_MENU ?>><?php echo TEXT_CONTACT_MENU ?></a></p></dt>
</dl>
<dl>
<!-- L'agenda-->
<dt onmouseover="javascript:montre();"><p><a href=<?php echo REF_AGENDA_MENU ?> title=<?php echo TIT_AGENDA_MENU ?>><?php echo TEXT_AGENDA_MENU ?></a></p></dt>
</dl>
<!--Le livre d'or-->
<dl>
<dt onmouseover="javascript:montre();"><p><a href=<?php echo REF_LIVOR_MENU ?> title="<?php echo TIT_LIVOR_MENU ?>"><?php echo TEXT_LIVOR_MENU ?></a></p></dt>
</dl>
<dl>
<!--les Newsletters-->
<dt onmouseover="javascript:montre();"><p><a href=<?php echo REF_NEWSLETTER_MENU ?> title="<?php echo TIT_NEWSLETTER_MENU ?>"><?php echo TEXT_NEWSLETTER_MENU ?></a></p></dt>
</dl>
</div>
</body>
</html>quel code dois-je modifier ou rajouter pour palier à ce problème de volatilité.
Merci d'avance de me venir en aide.
Modifié par MARTEGAU (25 Jan 2009 - 09:24)
