Bonjour, j'ai réalisé un menu déroulant basé sur le tutoriel de Alsacreations.
Ça fonctionne avec la technique en javascript :
Le problème c'est qu'à chaque fois qu'une page utilisant cette méthode se charge à l'ouverture, on voit apparaître les cases des sousmenus li.
Et je trouve ça très agaçant.
Quelqu'un a-t-il une solution pour empêcher que les sous-menus apparaissent au chargement.
Pour voir le problème ( vous verrez des petites cases jaunes apparaitre à l'endroit du menu) le lien est par ici:
http://www.comediensdelanse.com
le code java:
et le code css
puis comment ( en abrégé) j'ai déclaré les divs dans la page html.
Ça fonctionne avec la technique en javascript :
onmouseover="javascript:montre('smenu1');"onmouseout="javascript:montre();" Le problème c'est qu'à chaque fois qu'une page utilisant cette méthode se charge à l'ouverture, on voit apparaître les cases des sousmenus li.
Et je trouve ça très agaçant.
Quelqu'un a-t-il une solution pour empêcher que les sous-menus apparaissent au chargement.
Pour voir le problème ( vous verrez des petites cases jaunes apparaitre à l'endroit du menu) le lien est par ici:
http://www.comediensdelanse.com
le code java:
[#blue]
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';}
}
et le code css
[#blue]
/* CSS issu des tutoriels http://css.alsacreations.com */
menu dl, menu dt, dd, menu ul, menu li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu{
float: left;
width:166px;
padding: 0px;
border-bottom: 3px solid #cccccc;
font: small Verdana,sans-serif;
margin-top: 1px;
padding-top: 5px;
margin-left: 8px;
border-left: 0px solid #000000;
border-right: 0px solid #000000;
height: auto;
background-color: #CCCCCC;
}
#menu dt:hover{
background-color: #E0F3F9;
font-weight: bold;
text-decoration: none;
}
#menu dt {
cursor: pointer;
background: #A9BFCB;
height: 24px;
line-height: 24px;
margin: 2px 0px 1px 0px;
border-top-color: #888888;
color: #21536A;
text-align: left;
font-weight: bold;
padding-left: 10px;
border-top: 2px solid gray;
border-bottom: 2px;
border-bottom-color: #888888;
}
#menu dd {
position: absolute;
z-index: 100;
left: 9em;
margin-top: -1.4em;
width: auto;
border: 1px solid gray;
padding-right: 4px;
background-color: #FFFFCC;
}
#menu ul {
padding: 2px;
}
#menu li {
text-align: left;
font-size: 14px;
height: 20px;
line-height: 20px;
padding-left: 3px;
float:none !important;
}
#menu li a, #menu dt a {
color: #21536A;
text-decoration: none;
display: block;
}
#menu li a:hover {
text-decoration: none;
color: #880000;
font-weight: normal;
}
puis comment ( en abrégé) j'ai déclaré les divs dans la page html.
[#blue]
<dl id="menu">
<div align="center"><span class="T12grB">Menu de navigation</span> </div>
<dt onmouseover="javascript:montre('smenu1');"onmouseout="javascript:montre();"><a href="index.htm">Saison 2008</a></dt>
<dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre();">
<!--<ul> -->
<li><a href="index.htm">Accueil</a></li>
<li><a href="textt2.htm">Présentation de xx</a></li>
<!--</ul> -->
</dd>
<dt onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre();"><a href="Auteur.htm">L'auteur</a></dt>
<dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre();">
<!--<ul> -->
<li><a href="Auteur.htm">xx xxxx, l'auteur</a></li>
etc etc etc </dl>
