Se connecter / S'enregistrer
Votre question

menu déroulant avancé

Tags :
  • Javascript
  • Programmation
Dernière réponse : dans Programmation
9 Novembre 2006 12:57:09

Bonjour à tous,

Je souhaite créer une menu déroulant vertical à plusieurs niveaux :

Menu 1
Menu 1.1
Menu 1.1.1
Menu 1.1.2
Menu 1.2
Menu 1.2.1

Evidemment, je souhaite que chaque sous menu apparaisse lorsque je pointe le curseur sur le menu au-dessus.
Comment faire ?

Merci.

Autres pages sur : menu deroulant avance

9 Novembre 2006 14:04:59

Salut,
Sinon tu peux aussi t'aider grace à ce site

Bon courage à toi.
Contenus similaires
9 Novembre 2006 16:53:43

Bonjour,

Voici mon menu, et je ne comprends pas pourquoi le sous menu de N1 ne s'affiche pas lorsque que je suis dessus !

<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">
<!--
/* CSS issu des tutoriels http://css.alsacreations.com */
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 {
position: absolute;
top: 0;
left: 0;
}
dl#menu {
width: 15em;
}
dl#menu dt {
cursor: pointer;
margin: 2px 0;;
height: 20px;
line-height: 20px;
text-align: center;
font-weight: bold;
border: 1px solid gray;
background: #ccc;
}
dl#menu dd {
border: 1px solid gray;
}
dl#menu li {
text-align: center;
background: #fff;
}
dl#menu li a, dl#menu dt a {
color: #000;
text-decoration: none;
display: block;
border: 0 none;
height: 100%;
}

dl#menu li a:hover, dl#menu dt a:hover {
background: #eee;
}

#mentions {
font-family: verdana, arial, sans-serif;
position: absolute;
bottom : 200px;
left : 10px;
color: #000;
background-color: #ddd;
}
#mentions a {text-decoration: none;
color: #222;
}
#mentions a:hover{text-decoration: underline;
}

-->
</style>
</head>

<body>

<dl id="menu">
<dt onMouseOver=""="javascript:montre();">
<a href="#">Accueil</a></dt>

<dt onMouseOver="javascript:montre('smenu2');">Le club</dt>
<dd id="smenu2">
<ul>
<li><a href="#">Les équipes</a></li>
</ul>
</dd>

<dt onMouseOver="javascript:montre('smenu3');">Champion</dt>
<dd id="smenu3">
<ul>
<dt onmouseover="javascript:montre('smenu4');">N1</dt>
<dd id="smenu4">
<ul>
<li><a href="#">Réglement</a></li>
<li><a href="#">Régles</a></li>
<li><a href="#">Résultats</a></li>
</ul>
</dd>

<dt onMouseOver="javascript:montre('smenu5');">N3</dt>
<dd id="smenu5">
<ul>
<li><a href="#">Réglement</a></li>
<li><a href="#">Regles</a></li>
<li><a href="#">Résultats</a></li>
</ul>
</dd>

</ul>
</dd>

</dl>

</body>
</html>


Merci.
9 Novembre 2006 17:06:23

Tu as plusieurs fautes dans ton code html, voici le code corrigé :
  1. <body>
  2.  
  3. <dl id="menu">
  4. <dt onMouseOver="javascript:montre();"> <----------- ICI regarde bien tes doubles quot sont ouvertes et fermer n'importe comment dans ta version de code
  5. <a href="#">Accueil</a></dt>
  6.  
  7. <dt onMouseOver="javascript:montre('smenu2');">Le club</dt>
  8. <dd id="smenu2">
  9. <ul>
  10. <li><a href="#">Les équipes</a></li>
  11. </ul>
  12. </dd>
  13.  
  14. <dt onMouseOver="javascript:montre('smenu3');">Champion</dt>
  15. <dd id="smenu3">
  16. <ul>
  17. <dt onmouseover="javascript:montre('smenu4');">N1</dt>
  18. </ul> <-------------- ICI ne pas oublier la fermeture de la balise
  19. <dd id="smenu4">
  20. <ul>
  21. <li><a href="#">Réglement</a></li>
  22. <li><a href="#">Régles</a></li>
  23. <li><a href="#">Résultats</a></li>
  24. </ul>
  25. </dd>
  26.  
  27. <dt onMouseOver="javascript:montre('smenu5');">N3</dt>
  28. <dd id="smenu5">
  29. <ul>
  30. <li><a href="#">Réglement</a></li>
  31. <li><a href="#">Regles</a></li>
  32. <li><a href="#">Résultats</a></li>
  33. </ul>
  34. </dd>
  35.  
  36. </ul>
  37. </dd>
  38.  
  39. </dl>
  40.  
  41. </body>


Voilà pour commencer, après à toi de continuer et surtout fait attention à tes balises que tu ouvres mais que tu oublies de fermer.
Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS