Petit problème de menu déroulant [Résolu/Fermé]

Signaler
-
Messages postés
12251
Date d'inscription
jeudi 15 mai 2008
Statut
Modérateur
Dernière intervention
17 mars 2021
-
Bonjour,

je voulais avoir l'avis de personne plus expérimentées que moi...

En fait j'ai un petit problème sur un site que je suis en train de créer actuellement. J'ai ma barre de menu et je voudrais qu'un menu s'affiche à chaque survol de chaque bouton comme ici :

http://darkscythe.free.fr/probleme/cssmenu4.htm

mais pourtant quand j'essai de faire exactement la même chose sur mon site, cela ne fonctionne pas :

http://darkscythe.free.fr/probleme/index.html

merci de bien vouloir essayer de m'aider

14 réponses

Messages postés
12251
Date d'inscription
jeudi 15 mai 2008
Statut
Modérateur
Dernière intervention
17 mars 2021
2 625
Pourquoi inclure des balises <td> dans ta <div>? Il n'y a en a pas dans l'original. Reprends ce que tu as fait sur l'original :
<div id="menu">
<dl>
<dt onmouseover="javascript:montre('smenu1');"><img border="0" src="images/commune.gif" alt=""></dt>
<dd id="smenu1">
<ul>
<li><a href="#">Sous-Menu 1.1</a></li>
<li><a href="#">Sous-Menu 1.2</a></li>
<li><a href="#">Sous-Menu 1.3</a></li>
<li><a href="#">Sous-Menu 1.4</a></li>
<li><a href="#">Sous-Menu 1.5</a></li>
<li><a href="#">Sous-Menu 1.6</a></li>
</ul>
etc etc...
Ca semble bien non?
1
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 65492 internautes nous ont dit merci ce mois-ci

Messages postés
12251
Date d'inscription
jeudi 15 mai 2008
Statut
Modérateur
Dernière intervention
17 mars 2021
2 625
Tu n'as pas de display : none ; Donc en fin de compte les navigateurs décident que l'affichage est "présent". A lire pour info :

http://www.journaldunet.com/...

Voir également (et tout lire!!!) pour ton menu :

http://css.alsacreations.com/Construction-de-menus-en-CSS/Un-menu-deroulant-en-CSS-et-XHTML-vertical-et-horizontal

cette partie du tuto est ta solution :
La mise en forme : le CSS
Le code CSS va positionner les différents éléments, les mettre en forme (couleur, fond, bordures, etc.) et masquer les sous-menus au chargement de la page en appliquant un "display: none" sur ces sous-menus (dd).
Je ne suis pas spécialiste mais essaie ceci :

#menu dd {border: 1px solid gray;display: none ;}

à la place de #menu dd {border: 1px solid gray;}
Bonne chasse à l'info.
1
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 65492 internautes nous ont dit merci ce mois-ci

Messages postés
111
Date d'inscription
lundi 10 décembre 2007
Statut
Membre
Dernière intervention
26 octobre 2010
5
le premier url c'est ton site ?
si oui prend dans la page de la premiere url et adapte le
non le site c'est le deuxième =)

C'est du CSS... sais-tu l'utiliser au moins?
et en fait j'ai pris le code du menu déroulant quelque part et je l'ai adapté en fait (c'est le premier lien) donc il fonctionne c'est quand je retranscrit sur le vrai site que ca ne fonctionne pas =(
Messages postés
111
Date d'inscription
lundi 10 décembre 2007
Statut
Membre
Dernière intervention
26 octobre 2010
5
oui un peu

Je ne vois vraiment pas pourquoi tu bloque le clique-droit, il ne sert strictement à rien, surtout pour ton site =/
Mais bon ..
A première vue de ton code Html
Tu n'utilise que du javascript.
Or, pour avoir ce menu déroulant tu dois utiliser du CSS.
bah oui je me doute mais pourquoi ca marche sur une page vierge et quand je remet pareil sur mon site internet ca ne fonctionne pas (j'ai l'impression d'être un gros boulet c'est horrible XD)

Va faire un tour ici pour en apprendre plus en webmastering

Et ici pour un menu déroulant horizontal ou vertical
Je connais ce site pour les menus enfin merci quand même.

Je constate que je suis vraiment pas douée...
Messages postés
12251
Date d'inscription
jeudi 15 mai 2008
Statut
Modérateur
Dernière intervention
17 mars 2021
2 625
Salut,
Peut être est il simplement "masqué" dans ton tableau. Tu as fait un copié-collé d'un menu déroulant. Il faut donc qu'il "passe au-dessus" de la div ou du tableau placé juste en dessous. Enfin ce n'est qu'une supposition car nous n'avons pas accès à ton code.
voila le code oui c'est vrai désolée :s

<!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=iso-8859-1"><title>Bienvenue sur le site de SECHEVAL</title>

<link href="style.css" rel="stylesheet" type="text/css">
<script type="text/JavaScript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<style type="text/css">
<!--
.TitreVert {
color: #00CC59;
font-weight: bold;
}
.style1 {
color: #00CC00;
font-weight: bold;
}
-->
</style>
<SCRIPT LANGUAGE="JavaScript">
Today = new Date;
Heure = Today.getHours();
Min = Today.getMinutes();
if (Min<"10")
{
Message = " -  " + Heure + "h0" + Min + " ";
}
else
{
Message = " -  " + Heure + "h" + Min + " ";
}
</SCRIPT>




<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 {
top: 0;
left: 0;
z-index:100;
width: 100%;
}
#menu dl {
float: left;
width: 12em;
margin: 0 1px;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
}
#menu dd {
border: 1px solid gray;
}
#menu li {
text-align: center;
background: #fff;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu dt a:hover {
background: #2f6e3b;
}

a {text-decoration: none;
color: black;
color: #222;
}
-->
</style>
</head>


<body oncontextmenu="return bloque_clic()" onload="MM_preloadImages('/images/09_Btn1_1.gif','/images/10_Btn2_2.gif','/images/11_btn3_3.gif','images/12_btn4_1.gif','images/13_btn5_1.gif','images/14_btn6_1.gif','images/08_leftNavBar1.gif')">
<blockquote>


<script language=JavaScript>
function bloque_clic()
{return false;
}
</script>

<table class="SiteBorder" align="center" border="0" cellpadding="0" cellspacing="0" width="769">
<tbody><tr>
<td bgcolor="#0d4c19" valign="top"><img src="images/01_topLogo.gif" alt="BeauSite Logo" name="logo" usemap="#home" id="logo" border="0" height="159" width="339"><br>

<td bgcolor="#0d4c19" valign="top"><img src="images/02_slogan.jpg" alt="Slogan" height="178" width="123"></td>

<td rowspan="2" bgcolor="#0d4c19" valign="top" width="388"><img src="images/03_slogan_rightimage.jpg" height="205" width="389"></td>
</tr>
<tr>
<td colspan="2" bgcolor="#0d4c19" valign="top"><table border="0" cellspacing="0" width="100%">
<tbody><tr>
<font color=#98CB00>  <SCRIPT type="text/javascript">
<!--
js = new Array("Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi");
m = new Array("janvier", "février", "mars", "avril", "mai", "juin", "juillet", "août", "septembre", "octobre", "novembre", "décembre");
aujourdhui = new Date();
jour = aujourdhui.getDate();
annee = aujourdhui.getYear();
if (annee < 2000)
annee = annee + 1900;
document.write(js[aujourdhui.getDay()] + " " + jour + " " + m[aujourdhui.getMonth()] + " " + annee);
// -->
</SCRIPT> 
<SCRIPT LANGUAGE="JavaScript">
document.write(Message);
</SCRIPT>

</font>
</tr>
</tbody></table></td>
</tr>
<tr>
<td colspan="3" bgcolor="#0d4c19"><table border="1" bordercolor=#ff0000" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td><a href="index.html"><img src="images/accueil.gif" alt="Retour à l'accueil du site" name="home" id="home" onmouseover="MM_swapImage('home','','images/accueil1.gif',1)" onmouseout="MM_swapImgRestore()" border="0" height="32" width="57"></a></td>
<td><table cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>

<div id="menu">
<dl>
<td><dt onmouseover="javascript:montre('smenu1');"><a href="#"><img src="images/commune.gif" border="0" height="32" width="102"></a></dt></td>
<dd id="smenu1">
<ul>
<li><a href="#">Sous-Menu 1.1</a></li>
<li><a href="#">Sous-Menu 1.2</a></li>
<li><a href="#">Sous-Menu 1.3</a></li>
<li><a href="#">Sous-Menu 1.4</a></li>
<li><a href="#">Sous-Menu 1.5</a></li>
<li><a href="#">Sous-Menu 1.6</a></li>
</ul>
</dd>
</dl>

<td><a href="#"><img src="images/actu.gif" name="actu" id="actu" onmouseover="MM_swapImage('actu','','images/actu1.gif',1)" onmouseout="MM_swapImgRestore()" border="0" height="32" width="102"></a></td>
<td><a href="#"><img src="images/cm.gif" name="cm" id="cm" onmouseover="MM_swapImage('cm','','images/cm1.gif',1)" onmouseout="MM_swapImgRestore()" border="0" height="32" width="102"></a></td>
<td><a href="#"><img src="images/services.gif" name="services" id="services" onmouseover="MM_swapImage('services','','images/services1.gif',1)" onmouseout="MM_swapImgRestore()" border="0" height="32" width="102"></a></td>
<td><a href="#"><img src="images/maquet.gif" name="maquet" id="maquet" onmouseover="MM_swapImage('maquet','','images/maquet1.gif',1)" onmouseout="MM_swapImgRestore()" border="0" height="32" width="102"></a></td>
<td><a href="#"><img src="images/plan.gif" name="plan" id="plan" onmouseover="MM_swapImage('plan','','images/plan1.gif',1)" onmouseout="MM_swapImgRestore()" border="0" height="32" width="102"></a></td>
<td><a href="#"><img src="images/mail.gif" name="mail" id="mail" alt="nous écrire" onmouseover="MM_swapImage('mail','','images/mail1.gif',1)" onmouseout="MM_swapImgRestore()" border="0" height="32" width="57"></a></td>





</div>
</tr></tbody></table></td>
<td width="100"><img src="images/15_rightNavBar.jpg" height="32" width="125"></td>
</tr>
</tbody></table></td>
</tr>
<tr>
<td colspan="3" valign="top"><table border="0" cellpadding="0" cellspacing="0" width="769">
<tbody>
<tr>
<td height="25" valign="middle"> </td>
<td colspan="2" height="25" valign="middle"><strong> <br><span class="style1"> » </span> <u>LE MOT DU MAIRE</u> </strong></td>

</tr>
<tr>
<td height="25" valign="middle" width="36"> </td>
<td height="25" valign="middle" >
<br><br>


Tout ce que Monsieur le Maire a à dire

<br><br><br><br></td>

suite non interessante

merci de vous interesser à mon problèmes en tout cas ;)
Merci, il y a une amélioration mais ca fait toujours ca :

http://darkscythe.free.fr/probleme/index2.html

PS : j'avais encadré le contour du tableau pour mieux le situer
merci tu as résolu mon gros souci

Quand je survolle le bouton le menu reste affiché après aussi mais ca je vais résoudre le truc toute seule merci de ton aide en tout cas et merci à tout ceux qui m'on répondu

=D
Messages postés
12251
Date d'inscription
jeudi 15 mai 2008
Statut
Modérateur
Dernière intervention
17 mars 2021
2 625
Salut,
Je ne doute pas que tu aurais réussit seule puisque de toutes façons la réponse à ton problème est sur le lien alsacréations ci-dessus. Il faut en effet masquer ton sous-menu comme ceci :
<dl>
<dt onmouseover="javascript:montre('smenu1');">Menu 1</dt>

<dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">
<ul>
<li><a href="#">Sous-Menu 1.1</a></li>
<li><a href="#">Sous-Menu 1.2</a></li>
<li><a href="#">Sous-Menu 1.3</a></li>
<li><a href="#">Sous-Menu 1.4</a></li>
<li><a href="#">Sous-Menu 1.5</a></li>
<li><a href="#">Sous-Menu 1.6</a></li>
</ul>
</dd>
</dl>
L'important là dedans étant le : onmouseout="javascript:montre('').
Voilà bon courage pour la suite et n'hésite pas.