menu dynamique (et ouais)
Bonjour,
Bon j le dis des maintenant, mon probleme demande un peu de temps et reflexion:?
j essaye de faire un menu dynamique a l aide d un script que j ai trouvé sur un site. Il s agit d'un menu vertical, quand on clique sur une des rubrique les sous-rubriques apparaissent en dessous.
voici le code en question (etant debutant c'est est du thailandais pour moi) :
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
|
if(!window.Node){
var Node = {ELEMENT_NODE : 1, TEXT_NODE : 3};
}
function checkNode(node, filter){
return (filter == null || node.nodeType == Node[filter] || node.nodeName.toUpperCase() == filter.toUpperCase());
}
function getChildren(node, filter){
var result = new Array();
var children = node.childNodes;
for(var i = 0; i < children.length; i++){
if(checkNode(children[i], filter)) result[result.length] = children[i];
}
return result;
}
function getChildrenByElement(node){
return getChildren(node, "ELEMENT_NODE");
}
function getFirstChild(node, filter){
var child;
var children = node.childNodes;
for(var i = 0; i < children.length; i++){
child = children[i];
if(checkNode(child, filter)) return child;
}
return null;
}
function getFirstChildByText(node){
return getFirstChild(node, "TEXT_NODE");
}
function getNextSibling(node, filter){
for(var sibling = node.nextSibling; sibling != null; sibling = sibling.nextSibling){
if(checkNode(sibling, filter)) return sibling;
}
return null;
}
function getNextSiblingByElement(node){
return getNextSibling(node, "ELEMENT_NODE");
}
// Menu Functions & Properties
var activeMenu = null;
function showMenu() {
if(activeMenu){
activeMenu.className = "";
getNextSiblingByElement(activeMenu).style.display = "none";
}
if(this == activeMenu){
activeMenu = null;
} else {
this.className = "active";
getNextSiblingByElement(this).style.display = "block";
activeMenu = this;
}
return false;
}
function initMenu(){
var menus, menu, text, a, i;
menus = getChildrenByElement(document.getElementById("menua"));
for(i = 0; i < menus.length; i++){
menu = menus[i];
text = getFirstChildByText(menu);
a = document.createElement("a");
menu.replaceChild(a, text);
a.appendChild(text);
a.href = "#";
a.onclick = showMenu;
a.onfocus = function(){this.blur()};
}
}
if(document.createElement) window.onload = initMenu; |
Voici le code html a mettre dans le body
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<ul id="menua">
<li>rubrique 1
<ol>
<li><a href="blabla">sous rubrique 1</a</li>
<li><a href="blabla">sous rubrique 2</a</li>
<li><a href="blabla">sous rubrique 3</a</li>
</ol>
</li>
<li>rubrique 2
<ol>
<li><a href="blabla">sous rubrique 1</a</li>
<li><a href="blabla">sous rubrique 2</a</li>
<li><a href="blabla">sous rubrique 3</a</li>
</ol>
</ul> |
et le style correspondant au menu
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
|
<style type='text/css'>
ul#menua {
width: 100%;
list-style-type: none;
border-top: solid 1px #b9a894;
margin: 0;
padding: 0;
}
ul#menua ol {
display: none;
text-align: left;
list-style-type: none;
margin: 0;
padding: 5px;
}
ul#menua li, ul#menua a {
font-family: verdana, sans-serif;
font-size: 16px;
font-weight:bold;
color: #004080;
}
ul#menua li {
border-bottom: solid 2px #626262;
line-height: 60px;
}
ul#menua ol li {
border-bottom: none;
line-height: 40px;
}
ul#menua ol li:before {
content: "- ";
}
ul#menua a {
text-decoration: none;
outline: none;
}
ul#menua a:hover {
color: #539dbc;
}
ul#menua a.active {
color: #be5028;
}
</style> |
Le script marche parfaitement, mais je voudrais ajouter une image a coté de chaque grande rubrique.
Le probleme est que le script prend alors l'image comme une sous rubrique et zappe les vraies sous rubriques.
Le meilleur moyen de comprendre le probleme de c'est de tester le code.
Si vous avez une idée merci bcq
