Ik heb de volgende html waarmee ik een menu wil maken, de html is een absoluut gegeven, ik kan dit niet aanpassen.
Probleem is dat ik niet via een loop de mouseovers en mouseouts gekoppeld krijg. Het werkt wel als ik alle stap voor stap statisch doe, maar dat wil ik natuurlijk niet omdat het menu uitgebreid moet kunnen worden.
Met behulp van onderstaande javascript probeer ik dit te stylen
Let vooral op het laatste stuk, vanaf var mainmenu
Probleem is dat ik niet via een loop de mouseovers en mouseouts gekoppeld krijg. Het werkt wel als ik alle stap voor stap statisch doe, maar dat wil ik natuurlijk niet omdat het menu uitgebreid moet kunnen worden.
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
| <div class="hoofdmenu" id="hoofdmenu">
<div id="menutitles">
<div class="menutitle" id="menu1title">shop</div>
<div class="menutitle" id="menu2title">site</div>
<div class="menutitle" id="menu3title">e-procurement</div>
</div>
<div id="menu1" class="m1"">
<div class="menuitems">
<ul class="menu">
<li class="item568"><a
href="/nl/printers/productsearch.html?search=printer"><span>Printers</span></a></li>
<li class="item569"><a
href="/nl/toners-a-cartridges/productsearch.html?search=toner"><span>Toners
& Cartridges</span></a></li>
<li class="item570"><a
href="/nl/papier/productsearch.html?search=papier"><span>Papier</span></a></li>
<li class="item571"><a
href="/nl/geheugenopslag/productsearch.html?search=geheugen"><span>Geheugenopslag</span></a></li>
<li class="item572"><a
href="/nl/accessoires/productsearch.html?search=accessoires"><span>Accessoires</span></a></li>
<li class="parent item574"><a href="/nl/faq.html"><span>FAQ</span></a></li>
<li class="item583"><a
href="/nl/component/xshop/catalog.html?tpl=create"><span>test
catalogus</span></a></li>
<li class="item584"><a href="/nl/papierhier.html"><span>Papierhier</span></a></li>
</ul>
</div>
</div>
<div id="menu2" class="m2">
<div class="menuitems">
<ul class="menu">
<li class="item573"><a href="/nl/home.html"><span>Home</span></a></li>
</ul>
</div>
</div>
<div id="menu3" class="m3">
<div class="menuitems">
<ul class="menu">
<li class="parent item575"><span class="separator"><span>E-commerce</span></span>
<ul>
<li class="item577"><a href="/nl/e-commerce/supply-selector.html"><span>supply selector</span></a></li>
<li class="item578"><a href="/nl/e-commerce/product-feed.html"><span>product feed</span></a></li>
<li class="item579"><a href="/nl/e-commerce/shop-in-shop.html"><span>shop in shop</span></a></li>
</ul>
</li>
<li class="parent item576"><span class="separator"><span>E-procurement</span></span>
<ul>
<li class="item580"><a href="/nl/e-procurement/e-ordering.html"><span>E-ordering</span></a></li>
<li class="item581"><a href="/nl/e-procurement/e-invoicing.html"><span>E-invoicing</span></a></li>
<li class="item582"><a href="/nl/e-procurement/xml-validator.html"><span>XML-validator</span></a></li>
</ul>
</li>
</ul>
</div>
</div>
</div> |
Met behulp van onderstaande javascript probeer ik dit te stylen
Let vooral op het laatste stuk, vanaf var mainmenu
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
| window.addEvent('domready', function() {
$('menu1title').addEvent('click',function(){
$('menu1').style.display='block';
$('menu2').style.display='none';
$('menu3').style.display='none';
});
$('menu2title').addEvent('click',function(){
$('menu1').style.display='none';
$('menu2').style.display='block';
$('menu3').style.display='none';
});
$('menu3title').addEvent('click',function(){
$('menu1').style.display='none';
$('menu2').style.display='none';
$('menu3').style.display='block';
});
var mainmenu = document.getElementsByTagName('ul');
// nu alleen menu 3 (laatste tab) ivm test
var submenu=mainmenu[3].childNodes;
// display submenu on mouseover
var displaySub = function(submenu,q){
submenu[q].childNodes[1].style.display='block';
}
var hideSub = function(submenu,q){
submenu[q].childNodes[1].style.display='none';
}
//alert(submenu.length);
// binnen een lus werkt dit niet, hoe te fixen????
q=1;
//for(q=0;q<2;q++){
//q=1;
submenu[q].addEvent('mouseover',function(){
displaySub(submenu,q);
});
submenu[q].addEvent('mouseout',function(){
hideSub(submenu,q);
});
//}
}); |