5568 sujets

Sémantique web et HTML

Double menu dynamique?

salut a tous,
savez-vous comment faire pour construire un double menu dynamique vertical en HTML/CSS dans ce style:
Smiley url http://css.alsacreations.com/modelesmenus/vd2.htm[/url]

j'ai essayé, mais apparement ca bloque a un endroit....
pour le premier menu dynamique c bon, mais le second ne s'affiche pas. Je voudrai qu'un autre menu dynamique s'affiche lorsque je survol le premier "<li>" du premier menu dynamique qui s'affiche.
Voici le code que j'ai fait: 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<head> 
<title></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"> 
<!-- 
.body { 
background: white; 
padding:0; 
margin:0; 
font-family: verdana, arial, sans-serif; 
font-size: 90%; 
color: black; 
} 
.dl1, .dt1, .dd1, .ul, .li1 { 
margin: 0; 
padding: 0; 
list-style-type: none; 
} 
.dt1 { 
cursor: pointer; 
background: #A9BFCB; 
height: 20px; 
line-height: 20px; 
margin: 2px 0; 
border: 1px solid gray; 
text-align: center; 
font-weight: bold; 
} 

.dd1 { 
position: absolute; 
z-index: 100; 
left: 8em; 
margin-top: -1.4em; 
width: 10em; 
background: #A9BFCB; 
border: 1px solid gray; 
} 
.dd2 { 
position: absolute; 
z-index: 100; 
left: 15em; 
margin-top: -1.4em; 
width: 10em; 
background: #A9BFCB; 
border: 1px solid gray; 
} 

.ul1 { 
padding: 2px; 
} 
.li1 { 
text-align: center; 
font-size: 85%; 
height: 18px; 
line-height: 18px; 
} 
.li1, .dt1, .li2, .dt2{ 
color: #000; 
text-decoration: none; 
display: block; 
} 

.li1:hover { 
text-decoration: underline; 
} 
</style> 

</head> 
<body> 


<dl id="menu" class="dl1"> 
        <dt onmouseover="javascript:montre('smenu1');" class="dt"><a href="#">Menu 1</a></dt> 
            <dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre();" class="dd1"> 
                <ul class="ul1"> 
                    <li class="li1" onmouseover="javascript:montre('smenu2');" ><a href="#">Sous-Menu 1.1</a></li> 
                    <li class="li1"><a href="#">Sous-Menu 1.2</a></li> 
                    <li class="li1"><a href="#">Sous-Menu 1.3</a></li> 
                </ul> 
            </dd> 
            <dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre();" class="dd2"> 
                <ul class="ul2"> 
                    <li class="li2"><a href="#">Sous-Menu 2.1</a></li> 
                    <li class="li2"><a href="#">Sous-Menu 2.2</a></li> 
                    <li class="li2"><a href="#">Sous-Menu 2.3</a></li> 
                </ul> 
            </dd> 
        </dl> 
</body> 
</html>
[/code]
je voudrai juste un pti coup de pouce, car je suis sûr que ce n'est qu'une petite erreur....
Le menu que tu mentionnes n'est pas fait pour être double. Il ne marche pas sauf modification.

Je t'ai donné deux exemples reconnus, a toi de les retravailler ou alors réadapte celui d'Alsa en modifiant le Javascript.

C'est surement faisable...
c'est ce que j'ai essayé de faire justement, mais il y a une ou +ieurs erreus dans le script d'en haut....
Sujet clos
Aller à