Menu wil niet wat ik wil
Ik zit nu al een tijdje vast met een menu probleem op mijn site.
Ik ben via een tutorial zover gekomen dat ik een verticaal drop-down menu krijg wat 'on:hover' werkt.
Nu zou ik dit graag 'on:active' maken ipv 'on:hover'.
Voordat ik met <ul> en <li> ging werken werkte mijn 'on:active' (om links andere kleuren te geven) perfect.
Maar ook dat werkt nu niet meer, dus ik denk dat ik daar ergens fout zit.
ps. De links openen allemaal binnen mijn index.php in een iframe.
De site: http://bierens42.woelmuis.nl/testsite
Alvast bedankt voor het meedenken!
Index.php
Code (php)
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
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
<div id="menu">
<ul id="menuul">
<li><div class="button"><a href="home.php" target="contentframe">Home</a></div></li>
<li><div class="button"><a href="http://bierens42.woelmuis.nl/output/clubinfo.php" target="contentframe">Clubinfo</a></div></li>
<li><div class="button"><a href="http://bierens42.woelmuis.nl/output/afgelastingen.php" target="contentframe">Afgelastingen</a></div></li>
<li>
<div class="button"><a href="senioren.php" target="contentframe">Senioren</a></div>
<ul>
<li><div class="buttona"><a href="http://bierens42.woelmuis.nl/output/programmasenioren1.php" target="contentframe">Programma</a></div></li>
<li><div class="buttona"><a href="http://bierens42.woelmuis.nl/output/uitslagensenioren1.php" target="contentframe">Uitslagen</a></div></li>
<li><div class="buttona"><a href="http://bierens42.woelmuis.nl/output/standmaken.php?competitie=ZSC 1&soort=Competitie&deel=" target="contentframe">ZSC 1</a></div></li>
<li><div class="buttona"><a href="http://bierens42.woelmuis.nl/output/standmaken.php?competitie=ZSC 2&soort=Competitie&deel=" target="contentframe">ZSC 2</a></div></li>
<li><div class="buttona"><a href="http://bierens42.woelmuis.nl/output/standmaken.php?competitie=ZSC 3&soort=Competitie&deel=" target="contentframe">ZSC 3</a></div></li>
<li><div class="buttona"><a href="http://bierens42.woelmuis.nl/output/standmaken.php?competitie=ZSC 4&soort=Competitie&deel=" target="contentframe">ZSC 4</a></div></li>
<li><div class="buttona"><a href="http://bierens42.woelmuis.nl/output/standmaken.php?competitie=ZSC 5&soort=Competitie&deel=" target="contentframe">ZSC 5</a></div></li>
<li><div class="buttona"><a href="http://bierens42.woelmuis.nl/output/standmaken.php?competitie=ZSC Dames 1&soort=Competitie&deel=najaar" target="contentframe">ZSC Dames 1</a></div></li>
<li><div class="buttona"><a href="http://bierens42.woelmuis.nl/output/standmaken.php?competitie=ZSC Veteranen&soort=Competitie&deel=" target="contentframe">Veteranen</a></div></li>
</ul>
</li>
<li>
<div class="button"><a href="junioren.php" target="contentframe">Junioren</a></div>
<ul>
<li><div class="buttona"><a href="http://bierens42.woelmuis.nl/output/programmajunioren1.php" target="contentframe">Programma</a></div></li>
<li><div class="buttona"><a href="http://bierens42.woelmuis.nl/output/uitslagenjunioren1.php" target="contentframe">Uitslagen</a></div></li>
<li><div class="buttona"><a href="http://bierens42.woelmuis.nl/output/standmaken.php?competitie=ZSC A1&soort=Competitie&deel=" target="contentframe">ZSC A1</a></div></li>
<li><div class="buttona"><a href="http://bierens42.woelmuis.nl/output/standmaken.php?competitie=ZSC B1&soort=Competitie&deel=" target="contentframe">ZSC B1</a></div></li>
<li><div class="buttona"><a href="http://bierens42.woelmuis.nl/output/standmaken.php?competitie=ZSC C1&soort=Competitie&deel=" target="contentframe">ZSC C1</a></div></li>
<li><div class="buttona"><a href="http://bierens42.woelmuis.nl/output/standmaken.php?competitie=ZSC C2&soort=Competitie&deel=najaar" target="contentframe">ZSC C2</a></div></li>
<li><div class="buttona"><a href="http://bierens42.woelmuis.nl/output/standmaken.php?competitie=ZSC D1&soort=Competitie&deel=najaar" target="contentframe">ZSC D1</a></div></li>
<li><div class="buttona"><a href="http://bierens42.woelmuis.nl/output/standmaken.php?competitie=ZSC D2&soort=Competitie&deel=najaar" target="contentframe">ZSC D2</a></div></li>
<li><div class="buttona"><a href="http://bierens42.woelmuis.nl/output/standmaken.php?competitie=ZSC D2&soort=Competitie&deel=najaar" target="contentframe">ZSC E1</a></div></li>
<li><div class="buttona"><a href="http://bierens42.woelmuis.nl/output/standmaken.php?competitie=ZSC D2&soort=Competitie&deel=najaar" target="contentframe">ZSC E2</a></div></li>
<li><div class="buttona"><a href="http://bierens42.woelmuis.nl/output/standmaken.php?competitie=ZSC D2&soort=Competitie&deel=najaar" target="contentframe">ZSC F1</a></div></li>
<li><div class="buttona"><a href="http://bierens42.woelmuis.nl/output/standmaken.php?competitie=ZSC D2&soort=Competitie&deel=najaar" target="contentframe">ZSC F2</a></div></li>
<li><div class="buttona"><a href="http://bierens42.woelmuis.nl/output/standmaken.php?competitie=ZSC D2&soort=Competitie&deel=najaar" target="contentframe">ZSC F3</a></div></li>
<li><div class="buttona"><a href="http://bierens42.woelmuis.nl/output/standmaken.php?competitie=ZSC D2&soort=Competitie&deel=najaar" target="contentframe">ZSC Mini 1</a></div></li>
<li><div class="buttona"><a href="http://bierens42.woelmuis.nl/output/standmaken.php?competitie=ZSC D2&soort=Competitie&deel=najaar" target="contentframe">ZSC Mini 2</a></div></li>
</ul>
</li>
<li><div class="button"><a href="sponsors.php" target="contentframe">Sponsors</a></div></li>
<li><div class="button"><a href="fotos.php" target="contentframe">Foto's</a></div></li>
<li><div class="button"><a href="supver.php" target="contentframe">Supporters Vereniging</a></div></li>
</ul>
</div>
<ul id="menuul">
<li><div class="button"><a href="home.php" target="contentframe">Home</a></div></li>
<li><div class="button"><a href="http://bierens42.woelmuis.nl/output/clubinfo.php" target="contentframe">Clubinfo</a></div></li>
<li><div class="button"><a href="http://bierens42.woelmuis.nl/output/afgelastingen.php" target="contentframe">Afgelastingen</a></div></li>
<li>
<div class="button"><a href="senioren.php" target="contentframe">Senioren</a></div>
<ul>
<li><div class="buttona"><a href="http://bierens42.woelmuis.nl/output/programmasenioren1.php" target="contentframe">Programma</a></div></li>
<li><div class="buttona"><a href="http://bierens42.woelmuis.nl/output/uitslagensenioren1.php" target="contentframe">Uitslagen</a></div></li>
<li><div class="buttona"><a href="http://bierens42.woelmuis.nl/output/standmaken.php?competitie=ZSC 1&soort=Competitie&deel=" target="contentframe">ZSC 1</a></div></li>
<li><div class="buttona"><a href="http://bierens42.woelmuis.nl/output/standmaken.php?competitie=ZSC 2&soort=Competitie&deel=" target="contentframe">ZSC 2</a></div></li>
<li><div class="buttona"><a href="http://bierens42.woelmuis.nl/output/standmaken.php?competitie=ZSC 3&soort=Competitie&deel=" target="contentframe">ZSC 3</a></div></li>
<li><div class="buttona"><a href="http://bierens42.woelmuis.nl/output/standmaken.php?competitie=ZSC 4&soort=Competitie&deel=" target="contentframe">ZSC 4</a></div></li>
<li><div class="buttona"><a href="http://bierens42.woelmuis.nl/output/standmaken.php?competitie=ZSC 5&soort=Competitie&deel=" target="contentframe">ZSC 5</a></div></li>
<li><div class="buttona"><a href="http://bierens42.woelmuis.nl/output/standmaken.php?competitie=ZSC Dames 1&soort=Competitie&deel=najaar" target="contentframe">ZSC Dames 1</a></div></li>
<li><div class="buttona"><a href="http://bierens42.woelmuis.nl/output/standmaken.php?competitie=ZSC Veteranen&soort=Competitie&deel=" target="contentframe">Veteranen</a></div></li>
</ul>
</li>
<li>
<div class="button"><a href="junioren.php" target="contentframe">Junioren</a></div>
<ul>
<li><div class="buttona"><a href="http://bierens42.woelmuis.nl/output/programmajunioren1.php" target="contentframe">Programma</a></div></li>
<li><div class="buttona"><a href="http://bierens42.woelmuis.nl/output/uitslagenjunioren1.php" target="contentframe">Uitslagen</a></div></li>
<li><div class="buttona"><a href="http://bierens42.woelmuis.nl/output/standmaken.php?competitie=ZSC A1&soort=Competitie&deel=" target="contentframe">ZSC A1</a></div></li>
<li><div class="buttona"><a href="http://bierens42.woelmuis.nl/output/standmaken.php?competitie=ZSC B1&soort=Competitie&deel=" target="contentframe">ZSC B1</a></div></li>
<li><div class="buttona"><a href="http://bierens42.woelmuis.nl/output/standmaken.php?competitie=ZSC C1&soort=Competitie&deel=" target="contentframe">ZSC C1</a></div></li>
<li><div class="buttona"><a href="http://bierens42.woelmuis.nl/output/standmaken.php?competitie=ZSC C2&soort=Competitie&deel=najaar" target="contentframe">ZSC C2</a></div></li>
<li><div class="buttona"><a href="http://bierens42.woelmuis.nl/output/standmaken.php?competitie=ZSC D1&soort=Competitie&deel=najaar" target="contentframe">ZSC D1</a></div></li>
<li><div class="buttona"><a href="http://bierens42.woelmuis.nl/output/standmaken.php?competitie=ZSC D2&soort=Competitie&deel=najaar" target="contentframe">ZSC D2</a></div></li>
<li><div class="buttona"><a href="http://bierens42.woelmuis.nl/output/standmaken.php?competitie=ZSC D2&soort=Competitie&deel=najaar" target="contentframe">ZSC E1</a></div></li>
<li><div class="buttona"><a href="http://bierens42.woelmuis.nl/output/standmaken.php?competitie=ZSC D2&soort=Competitie&deel=najaar" target="contentframe">ZSC E2</a></div></li>
<li><div class="buttona"><a href="http://bierens42.woelmuis.nl/output/standmaken.php?competitie=ZSC D2&soort=Competitie&deel=najaar" target="contentframe">ZSC F1</a></div></li>
<li><div class="buttona"><a href="http://bierens42.woelmuis.nl/output/standmaken.php?competitie=ZSC D2&soort=Competitie&deel=najaar" target="contentframe">ZSC F2</a></div></li>
<li><div class="buttona"><a href="http://bierens42.woelmuis.nl/output/standmaken.php?competitie=ZSC D2&soort=Competitie&deel=najaar" target="contentframe">ZSC F3</a></div></li>
<li><div class="buttona"><a href="http://bierens42.woelmuis.nl/output/standmaken.php?competitie=ZSC D2&soort=Competitie&deel=najaar" target="contentframe">ZSC Mini 1</a></div></li>
<li><div class="buttona"><a href="http://bierens42.woelmuis.nl/output/standmaken.php?competitie=ZSC D2&soort=Competitie&deel=najaar" target="contentframe">ZSC Mini 2</a></div></li>
</ul>
</li>
<li><div class="button"><a href="sponsors.php" target="contentframe">Sponsors</a></div></li>
<li><div class="button"><a href="fotos.php" target="contentframe">Foto's</a></div></li>
<li><div class="button"><a href="supver.php" target="contentframe">Supporters Vereniging</a></div></li>
</ul>
</div>
Stylesheet:
Code (php)
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
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
/*MENU*/
#menuul, #menuul ul {
list-style:none;
margin:0px;
padding:0px;
}
#menuul li {
width:140px;
}
#menuul ul {
display:none;
}
#menuul li:hover ul {
display:block;
}
#menuul li div.button {
border-top:1px solid black;
border-bottom:1px solid black;
text-align:left;
font-size:12px;
height:15px;
margin:0 0 1px 0;
}
#menuul li div.buttona {
border-top:1px solid black;
border-bottom:1px solid black;
text-align:left;
font-size:12px;
height:15px;
margin:0 0 1px 0;
}
#menuul li div.button a{
padding-left:5px;
}
#menuul li div.buttona a{
padding-left:65px;
}
#menuul li div.button a:link{
background-color:#FFCC00;
display:block;
text-decoration:none;
}
#menuul li div.button a:visited{
background-color:#FFCC00;
display:block;
text-decoration:none;
}
#menuul li div.button a:hover{
background-color:#333333;
display:block;
text-decoration:none;
}
#menuul li div.button a:active{
background-color:#333333;
display:block;
text-decoration:none;
}
#menuul li div.buttona a:link{
background-color:#FFCC00;
display:block;
text-decoration:none;
}
#menuul li div.buttona a:visited{
background-color:#FFCC00;
display:block;
text-decoration:none;
}
#menuul li div.buttona a:hover{
background-color:#333333;
display:block;
text-decoration:none;
}
#menuul li div.buttona a:active{
background-color:#333333;
display:block;
text-decoration:none;
}
/**/
#menuul, #menuul ul {
list-style:none;
margin:0px;
padding:0px;
}
#menuul li {
width:140px;
}
#menuul ul {
display:none;
}
#menuul li:hover ul {
display:block;
}
#menuul li div.button {
border-top:1px solid black;
border-bottom:1px solid black;
text-align:left;
font-size:12px;
height:15px;
margin:0 0 1px 0;
}
#menuul li div.buttona {
border-top:1px solid black;
border-bottom:1px solid black;
text-align:left;
font-size:12px;
height:15px;
margin:0 0 1px 0;
}
#menuul li div.button a{
padding-left:5px;
}
#menuul li div.buttona a{
padding-left:65px;
}
#menuul li div.button a:link{
background-color:#FFCC00;
display:block;
text-decoration:none;
}
#menuul li div.button a:visited{
background-color:#FFCC00;
display:block;
text-decoration:none;
}
#menuul li div.button a:hover{
background-color:#333333;
display:block;
text-decoration:none;
}
#menuul li div.button a:active{
background-color:#333333;
display:block;
text-decoration:none;
}
#menuul li div.buttona a:link{
background-color:#FFCC00;
display:block;
text-decoration:none;
}
#menuul li div.buttona a:visited{
background-color:#FFCC00;
display:block;
text-decoration:none;
}
#menuul li div.buttona a:hover{
background-color:#333333;
display:block;
text-decoration:none;
}
#menuul li div.buttona a:active{
background-color:#333333;
display:block;
text-decoration:none;
}
/**/
Code (php)
1
2
3
2
3
<li><a href="home.php" target="contentframe" class="current">Home</a></li>
<li><a href="http://bierens42.woelmuis.nl/output/clubinfo.php" target="contentframe">Clubinfo</a></li>
<li><a href="http://bierens42.woelmuis.nl/output/afgelastingen.php" target="contentframe">Afgelastingen</a></li>
<li><a href="http://bierens42.woelmuis.nl/output/clubinfo.php" target="contentframe">Clubinfo</a></li>
<li><a href="http://bierens42.woelmuis.nl/output/afgelastingen.php" target="contentframe">Afgelastingen</a></li>
En in je css:
Maar dan moet je afstand doen van je iframe
Gewijzigd op 13/01/2013 17:20:25 door jack maessen
Maar ik vind het zo vreemd dat het nu niet meer werkt , terwijl toen het niet in <ul><li> stond, werkte het wel perfect.
Kan iemand daar de fout in aanwijzen / vertellen waarom het niet werkt?
Inmiddels werkt het weer geloof ik te zien?
Met vriendelijke groeten,
Bart Roelofs
Ik gebruik een iframe omdat ik het zo moet maken dat andere mensen de contentpagina's makkelijk kunnen aanpassen.
Zou daar nog een andere/betere oplossing voor zijn?
Ik wil namelijk niet op iedere pagina mijn hele layout/menu aanroepen.
Als dat geen optie is, en mensen willen hun tekst zelf kunnen maken kun je een externe style maken, en in het ergste geval je content aanroepen via een .txt bestandje van kladblok.
Maar al met al lijkt een cms me het gemakkelijkste. Bij een heel basaal theme van wordpress hoef je ook maar 1 layout te maken, en er een aantal functies in te stoppen. Wat dat betreft dus niet zo lastig.
Daarnaast nog de optie om javascript ervoor te gebruiken. Voorbeeldje hiervan is:
n.i.k.e.h.a.u.t.v.a.s.t.nl
Even aantal puntjes weghalen en je hebt hem. Als je dat wilt gebruiken, laat even weten. Dan leg ik het je wel uit.
Met vriendelijke groeten,
Bart Roelofs
Dat cms verhaal klinkt goed, maar daar ga ik me eerst maar wat in verdiepen.