Navigation menu vertical plusieurs niveaux
Bonjour,
je debutte avec javascript et je suis entrain de realiser une navigation avec menu vertical se que je cherche a faire et d'ajouter un autre niveau dans ma navigation (sous menu et sous sous menu) mais j'ai pas eu l'idée comment faire
voici mon code
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
function closeSubMenu() {
var aUL=document.getElementById('sidemenu').getElementsByTagName('ul');
for(var i=0; i<aUL.length; i++) {
aUL[i].className='collapsed';
}
}
function toggleSubMenu(obj) {
// remember state
var sibling=(obj.nextSibling.nodeType==3)? obj.nextSibling.nextSibling : obj.nextSibling;
var state=sibling.className;
// close all
closeSubMenu();
// set state
sibling.className=(state=='collapsed')? 'expanded' : 'collapsed';
}
window.onload=function() {
closeSubMenu();
var aP=document.getElementById('sidemenu').getElementsByTagName('a');
for(var i=0; i<aP.length; i++) {
aP[i].onclick=function() {toggleSubMenu(this)};
aP[i].style.cursor='pointer';
}
}
</script>
<style type="text/css">
* {
margin:0;
padding:0;
}
body {
font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size:0.8em;
color:#000;
}
.expanded {
display:block;
}
.collapsed {
display:none;
}
#sidemenu {
width:10em;
overflow:hidden;
}
#sidemenu li {
list-style:none;
}
#sidemenu a {
display:block;
width:10em;
border-bottom:1px solid #777;
padding-left:1em;
background:#fa0;
color:#555;
text-decoration:none;
vertical-align:bottom; /* fixes the IE5 box gap */
}
#sidemenu a:hover {
background:#ccc;
color:#07f;
}
li p {
float:none !important; float:left; /* fixes the IE5 nested list gap */
width:10em;
border-bottom:1px solid #777;
background:#f3f3f3;
color:#f70;
font-weight:bold;
text-align:center;
}
</style>
</head>
<body>
<ul id="sidemenu">
<li><a>main 1</a>
<ul>
<li><a href="sub11">submenu 1</a></li>
<li><a href="sub12">submenu 2</a></li>
<li><a href="sub13">submenu 3</a>
<ul id="sidemenu">
<li><a href="sub11">subsub1 1</a></li>
<li><a href="sub12">subsub1 2</a></li>
<li><a href="sub13">subsub1 3</a></li>
</ul>
</li>
</ul>
</li>
<li><a>main 2</a>
<ul>
<li><a href="sub21">sub2 1</a></li>
<li><a href="sub22">sub2 2</a></li>
<li><a href="sub23">sub2 3</a>
</li>
</ul>
</li>
<li><a>main 3</a>
<ul>
<li><a href="sub31">sub3 1</a></li>
<li><a href="sub32">sub3 2</a></li>
<li><a href="sub33">sub3 3</a></li>
</ul>
</li>
</ul>
</body>
</html> |
