Op aanraden van een aantal tweakers ben ik begonnen (na mijn vakantie) aan het veranderen van mijn javascript/div'jes menu naar een "netter" ul li menu.
In het begin leek het allemaal super. Onclick de class veranderen en klaar.
Maar toen ik met sub menuus begon.... toen begon de problemen. Sub menuus klapte in meer in of uit en het event capturen of bubbling ging niet goed.
Toen ik het een beetje zat begon te worden, ben ik wat aan de mooi-ig heid gaan doen, maar dat wilde ook niet echt. Omdat de style van de li ook de onderliggende ul "vol kleurt". Maar dit even terzijde. Ik heb eerst liever iets dat in en uit klapt.
Als eerst een stukje css:
Het stukje javascript om ze te toggle'en:
En dan het stukje html
Ik heb het er even met Mophor over gehad, hij vond zo geen fouten. Of kleintjes, die ik al verbeterd heb.
Maar de eerste li vouwt wel in en uit, maar de sub menuus doen niks, alleen van plaatje veranderen, maar klappen niet in of uit.
Werk de descendant selector oneindig door op alle elementen. Dus dat de ul li ul li ul(sub menu) ook met mijn style werkt?
Kan iemand mij hier misschien mee helpen?
In het begin leek het allemaal super. Onclick de class veranderen en klaar.
Maar toen ik met sub menuus begon.... toen begon de problemen. Sub menuus klapte in meer in of uit en het event capturen of bubbling ging niet goed.
Toen ik het een beetje zat begon te worden, ben ik wat aan de mooi-ig heid gaan doen, maar dat wilde ook niet echt. Omdat de style van de li ook de onderliggende ul "vol kleurt". Maar dit even terzijde. Ik heb eerst liever iets dat in en uit klapt.
Als eerst een stukje css:
Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| li.closed { list-style-image: url(images/Plus.gif); } li.open { list-style-image: url(images/Min.gif); } li.closed ul { display: none; margin-bottom:0px; margin-top: 0px; } li.open ul { display: block; margin-bottom:0px; margin-top: 0px; } |
Het stukje javascript om ze te toggle'en:
JavaScript:
1
2
3
4
5
6
7
8
| function toggle(elem) { elem.className = (elem.className=='closed')?'open':'closed'; //alert (elem.className); if (!e) var e = window.event; e.cancelBubble = true; if (e.stopPropagation) e.stopPropagation(); } |
En dan het stukje html
HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| <ul id="menu"> <li class="closed" onclick="toggle(this);"> item <ul> <li class="closed" onclick="toggle(this);"> item <ul> <li class="end ">b</li> </ul> </li> <li class="closed" onclick="toggle(this);"> item <ul> <li class="closed" onclick="toggle(this);"> item <ul> <li class="end ">c</li> </ul> </li> </ul> </li> </ul> </li> </ul> |
Ik heb het er even met Mophor over gehad, hij vond zo geen fouten. Of kleintjes, die ik al verbeterd heb.
Maar de eerste li vouwt wel in en uit, maar de sub menuus doen niks, alleen van plaatje veranderen, maar klappen niet in of uit.
Werk de descendant selector oneindig door op alle elementen. Dus dat de ul li ul li ul(sub menu) ook met mijn style werkt?
Kan iemand mij hier misschien mee helpen?