Bonjour a tous,
J'ai trouvé récement sur ce cite du code pour pouvoir créer un menu déroulant. Je l'ai un peut modifier pour faire le mien, mais j'ai un petit soucis.
Il aurrai fallut que je dispose d'un niveau de sous menu suplémentaire. J'ai essayé plusieur solution trouvée sur le web mais rien ne fonctionne.
Merci d'avance de bien vouloir preter attention a mon probleme.
Modifié par frans1982 (08 Feb 2006 - 20:45)
J'ai trouvé récement sur ce cite du code pour pouvoir créer un menu déroulant. Je l'ai un peut modifier pour faire le mien, mais j'ai un petit soucis.
Il aurrai fallut que je dispose d'un niveau de sous menu suplémentaire. J'ai essayé plusieur solution trouvée sur le web mais rien ne fonctionne.
<html>
<head>
<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">
<!--
body {
margin: 0;
padding: 0;
font: 80% verdana, arial, sans-serif;
background-image: url(abcmarche_fond2.jpg);
background-repeat: no-repeat;
background-attachment: scroll;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute; /* placement du menu, à modifier selon vos besoins */
top: 100;
left: 100;
z-index:100;
width: 100%; /* correction pour Opera */
}
#menu dl {
float: left;
width: 12em;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: darkblue;
color: white;
border: 1px solid darkblue;
background-image: url(menu_ferme.bmp);
background-repeat: no-repeat;
background-position: right;
margin: 2px;
}
#menu dd {
display: none;
border: 1px solid blue;
}
#menu li {
text-align: center;
background: darkblue;
}
#menu li a, #menu dt a {
color: white;
alink: black;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu dt a:hover, #menu dt a:focus{
background: #eeeeee;
color: black;
background-image: url(menu_ouvert.bmp);
background-repeat: no-repeat;
background-position: right;
}
#menu li a:hover, #menu li a:focus{
background: #eeeeee;
color: black;
}
#site {
position: absolute;
z-index: 1;
top : 70px;
left : 10px;
color: #000;
background-color: #ddd;
padding: 5px;
border: 1px solid gray;
}
-->
</style>
</head>
<body>
<div id="menu">
<dl>
<dt style="background-image: url();" onmouseover="javascript:montre();"><a hover style="background-image: url();" href="#">Accueil</a></dt>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu1');"><a href="#">Informations</a></dt>
<dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">
<ul>
<li><a href="#">Comité</a></li>
<li><a href="#">Salle</a></li>
<li><a href="#">Horaire</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu2');"><a href="#">Résultats</a></dt>
<dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre('');">
<ul>
<li><a href="#">Tournois</a></li>
<li><a href="#">Interclub</a></li>
<li><a href="#">Autres</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu3');"><a href="#">Photos</a></dt>
<dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre('');">
<ul>
<li><a href="#">Entrainement</a></li>
<li><a href="#">Tournois</a></li>
<li><a href="#">Interclub</a></li>
<li><a href="#">Divers</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu4');"><a href="#">Liens</a></dt>
<dd id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre('');">
<ul>
<li><a href="#">FLBB</a></li>
<li><a href="#">ISNC</a></li>
<li><a href="#">SJBB</a></li>
</ul>
</dd>
</dl>
</div>
</body>
</html>Merci d'avance de bien vouloir preter attention a mon probleme.
Modifié par frans1982 (08 Feb 2006 - 20:45)
