Navigation menu vertical plusieurs niveaux

**amani1** · 21/10/2014, 10h23

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**Jordan-Tess** · 21/10/2014, 13h58

Bonjour,

En ce qui concerne la création de menus, va faire un tour du coté de JQuery UI : http://jqueryui.com/menu/ .
Regardes les tutos, et tu verra ça va te simplifier la chose. Il te suffira juste de créer ton corps HTML et faire appel à la fonction !

Ps : JQuery est une bibliothèque JavaScript libre qui porte sur l'interaction entre JavaScript et HTML, et a pour but de simplifier des commandes communes de JavaScript.

Bon courage,

**amani1** · 21/10/2014, 14h13

Merci pour votre réponse .Oui je connais bien JQuery mais je vais créer ma propre solution avec javascript native du coup je cherche a m'evader de l'utilisation des bibliothéque.

**NoSmoking** · 25/10/2014, 16h42

Bonjour,

je debutte avec javascript et je suis entrain de realiser une navigation avec menu vertical ...

de nos jours cela se fait en CSS pure.

**Sergejack** · 28/10/2014, 09h30

Envoyé par amani1

Merci pour votre réponse .Oui je connais bien JQuery mais je vais créer ma propre solution avec javascript native du coup je cherche a m'evader de l'utilisation des bibliothéque.

Drôle d'idée. C'est pour un cours ?

Navigation menu vertical plusieurs niveaux

JavaScript

Discussions similaires

Partager

Partager