Le titre n'est plus valable car là, il s'agit d'un menu déroulant avec une tte petite dose de JS.
Pompé à droite et à gauche et légèrement modifié, il reste qq chose que je ne sais pas maîtriser :
Quand on sort du sous-menu par la droite, ce dernier reste affiché et il y a chevauchement si on ouvre un second sous-menu.
Est-ce qu'il faudrait placer le tout ds un cadre
Est-ce qu'il existe une commande qui indique qu'en dehors de tel cadre la fonction doit changer
L'affichage est loin d'être parfait sous IE mais ça colle sous MFF.
Pour l'habillage, il n'en est pas question ici, ça je sais faire
Merci de votre aide.
Je vs joins tt le code avec CSS et JS :
<!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>menuderoulant</title>
<style>
ul, li {
margin: 1em; /*ecartement entre les menus*/
padding: 0.5em; /*hauteur des boutons*/
list-style-type: none;
font-size: 12px; /*grosseur police sous-menus*/
font-family: verdana, arial, sans-serif;
font-weight:bold;
}
.menu {
/*clear: both;*//* pour obliger le retour à la ligne des menus */
position:relative;
/*margin-top: 10em; *//*ecartement entre les menus*/
width: 15%; /*taille des boutons menus*/
height: 10%; /* pas d'incidence */
top:5%; /* """" */
left:1%; /*position par rapport à la gauche*/
border: 3px solid #FF0000;
text-align: center;
font-size: 12px;
font-weight: bold;
color:#6600FF; /*violet*/
}
#smenu1, #smenu2, #smenu3 {
position:absolute;
left:21%;
display: none; /* par défaut sous-menus pas affichés */
width: 20%;
height: 45%;
border:3px solid #FF9900;
font-size: 8px;
}
#smenu1 {
top:4%;
}
#smenu2{
top:13%;
}
#smenu3 {
top:22%;
}
</style>
<script>
function montre(id) {
if (document.getElementById) {
document.getElementById(id).style.display="block";
} else if (document.all) {
document.all[id].style.display="block";
} else if (document.layers) {
document.layers[id].display="block";
} }
function cache(id) {
if (document.getElementById) {
document.getElementById(id).style.display="none";
} else if (document.all) {
document.all[id].style.display="none";
} else if (document.layers) {
document.layers[id].display="none";
} }
</script>
</head>
<body>
<ul>
<li class="menu" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">Menu 1</li>
<ul id="smenu1" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">
<li><a href="">SousMenu 1 de 1</a></li>
<li><a href="">SousMenu 2 de 1</a></li>
<li><a href="">SousMenu 3 de 1</a></li>
</ul>
<li class="menu" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">Menu 2</li>
<ul id="smenu2" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">
<li><a href="">SousMenu 1 de 2</a></li>
<li><a href="">SousMenu 2 de 2</a></li>
<li><a href="">SousMenu 3 de 2</a></li>
<li><a href="">SousMenu 4 de 2</a></li>
<li><a href="">SousMenu 5 de 2</a></li>
</ul>
<li class="menu" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">Menu 3</li>
<ul id="smenu3" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">
<li><a href="">SousMenu 1 de 3</a></li>
<li><a href="">SousMenu 2 de 3</a></li>
</ul>
</ul>
</body>
</html>
