11548 sujets

JavaScript, DOM et API Web HTML5

Ménu dynamique OnMouseOver/OnMouseOut 3 niveaux

Nous essayons de réaliser un menu 3 niveaux avec du javascript, des DIV, des comportements et un fichier CSS.
Nous pouvons afficher seulement deux niveaux.
Menu 1
Sous menu 1-1
Sous menu 1-2
Sous menu 1-3
Menu 2
Sous menu 2-1

Mais nous aimerions pouvoir faire un Sous-sous menu
exemple : Sous sous menu 1-1-1

Ci-dessous le code html
<html>
<head>
<title>Document sans titre</title>

<SCRIPT language=JavaScript>
function showMenu(leMenu) {
leMenu.className = "selected";
}
function hideMenu(leMenu) {
leMenu.className = "unselected";
}
</SCRIPT>


</head>

<body leftmargin="0" topmargin="0" >
<table>
<tr>
<td><div class=main_menu id="Menu">
<div class=unselected onMouseOver=showMenu(this); onMouseOut=hideMenu(this);>
<div class=menu1> <a href="" class=menu1>Menu-1 </a></div>
<div class=menu2> <a class=menu2 href="">Menu-1-1</a><br>
<a class=menu2 href="">Menu-1-2</a><br>
<a class=menu2 href="">Menu1-3</a></div>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>


ci-dessous les codes du fichier css

DIV.menu1 {BORDER-RIGHT: #BF93CC 1px solid; PADDING-RIGHT: 11px; BACKGROUND-POSITION: right 50%; BORDER-TOP: #BF93CC 1px solid; MARGIN-TOP: 2px; PADDING-LEFT: 0px; BACKGROUND-IMAGE: url(); PADDING-BOTTOM: 3px; VERTICAL-ALIGN: middle; BORDER-LEFT: #BF93CC 1px solid; WIDTH: 100%; PADDING-TOP: 4px; BORDER-BOTTOM: #BF93CC 1px solid; BACKGROUND-REPEAT: no-repeat; BACKGROUND-COLOR: #FFFFFF; TEXT-ALIGN: center}

.selected DIV.menu1 {BACKGROUND-IMAGE: url(); BACKGROUND-COLOR: #ffffff}
A.menu1 {FONT-WEIGHT: NORMAL; FONT-SIZE: 1em; COLOR: #BF93CC; FONT-FAMILY: Arial, Verdana, Helvetica, sans-serif; TEXT-DECORATION: none}

DIV.menu2 { DISPLAY: none; PADDING-BOTTOM: 4px; PADDING-TOP: 4px; BACKGROUND-COLOR: #BF93CC}
.selected DIV.menu2 {DISPLAY: block}
A.menu2 {BACKGROUND-POSITION: left 2px; PADDING-LEFT: 17px; FONT-WEIGHT: normal; FONT-SIZE: 1em; BACKGROUND-IMAGE: url(); PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 100%; COLOR: #ffffff; PADDING-TOP: 0px; BACKGROUND-REPEAT: no-repeat; FONT-STYLE: normal; FONT-FAMILY: arial, Verdana; BACKGROUND-COLOR: #BF93CC; TEXT-DECORATION: none}
A.menu2:hover { COLOR: #ffffff; BACKGROUND-COLOR: #BF93CC}
A.menu2:selected {FONT-WEIGHT: bold}
Modifié par jecjp29 (24 May 2006 - 12:59)
Administrateur
Hello et bienvenue ici,

Comme tu es dans le salon Javascript, tu dois te douter que la grande majorité des sujets ici (voire tous) traitent de "Javascript".

Ton sujet va donc malheureusement vite se perdre dans la masse, tout simplement parce que tu ne donnes pas assez de précision dans ton titre Smiley decu

Merci aussi de bien vouloir éditer ton premier message pour afficher les codes proprement comme le demandent les règles.
Modifié par Raphael (23 May 2006 - 18:15)
ton arborescence n'est pas logique ==> revois ce que tu as écrit;

indente ton code html ==> il est très difficile à lire et les erreurs d'imbrication sont difficiles à repérer;
Sujet clos
Aller à