Menu buttons
Ik ben bezig om een site te maken.
Ik werk nu met een iframepje om door middel van 3 bestanden mijn menu te laten zien / openklappen.
Nu is mijn vraag hoe ik dit het beste 'scriptsgewijs' op kan lossen (javascript/php/html)
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
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
<link rel="stylesheet" type="text/css" href="menu.css">
<div class="button"><a href=home.php target=contentframe>Home</a></div>
<div class="button"><a href="http://bierens42.woelmuis.nl/output/clubinfo.php" target=contentframe>Clubinfo</a></div>
<div class="button"><a href="http://bierens42.woelmuis.nl/output/afgelastingen.php" target=contentframe>Afgelastingen</a></div>
//Als ik hierop klik opent alles tussen * en *
<div class="button"><a href=menusenioren.php target=menuframe>Senioren</a></div>
<div class="button" id="buttona"><a href="http://bierens42.woelmuis.nl/output/programmasenioren1.php" target=contentframe>Programma</a></div>
<div class="button" id="buttona"><a href="http://bierens42.woelmuis.nl/output/uitslagensenioren1.php" target=contentframe>Uitslagen</a></div>
*
<div class="button" id="buttona"><a href="http://bierens42.woelmuis.nl/output/standmaken.php?competitie=ZSC 1&soort=Competitie&deel=" target=contentframe>ZSC 1</a></div>
<div class="button" id="buttona"><a href="http://bierens42.woelmuis.nl/output/standmaken.php?competitie=ZSC 2&soort=Competitie&deel=" target=contentframe>ZSC 2</a></div>
<div class="button" id="buttona"><a href="http://bierens42.woelmuis.nl/output/standmaken.php?competitie=ZSC 3&soort=Competitie&deel=" target=contentframe>ZSC 3</a></div>
<div class="button" id="buttona"><a href="http://bierens42.woelmuis.nl/output/standmaken.php?competitie=ZSC 4&soort=Competitie&deel=" target=contentframe>ZSC 4</a></div>
<div class="button" id="buttona"><a href="http://bierens42.woelmuis.nl/output/standmaken.php?competitie=ZSC 5&soort=Competitie&deel=" target=contentframe>ZSC 5</a></div>
<div class="button" id="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>
<div class="button" id="buttona"><a href="http://bierens42.woelmuis.nl/output/standmaken.php?competitie=ZSC Veteranen&soort=Competitie&deel=" target=contentframe>Veteranen</a></div>
*
//Als ik hierop klik opent alles tussen **
<div class="button"><a href=menujunioren.php target=menuframe>Junioren</a></div>
<div class="button" id="buttona"><a href="http://bierens42.woelmuis.nl/output/programmajunioren1.php" target=contentframe>Programma</a></div>
<div class="button" id="buttona"><a href="http://bierens42.woelmuis.nl/output/uitslagenjunioren1.php" target=contentframe>Uitslagen</a></div>
**
<div class="button" id="buttona"><a href="http://bierens42.woelmuis.nl/output/standmaken.php?competitie=ZSC A1&soort=Competitie&deel=" target=contentframe>ZSC A1</a></div>
<div class="button" id="buttona"><a href="http://bierens42.woelmuis.nl/output/standmaken.php?competitie=ZSC B1&soort=Competitie&deel=" target=contentframe>ZSC B1</a></div>
<div class="button" id="buttona"><a href="http://bierens42.woelmuis.nl/output/standmaken.php?competitie=ZSC C1&soort=Competitie&deel=" target=contentframe>ZSC C1</a></div>
<div class="button" id="buttona"><a href="http://bierens42.woelmuis.nl/output/standmaken.php?competitie=ZSC C2&soort=Competitie&deel=najaar" target=contentframe>ZSC C2</a></div>
<div class="button" id="buttona"><a href="http://bierens42.woelmuis.nl/output/standmaken.php?competitie=ZSC D1&soort=Competitie&deel=najaar" target=contentframe>ZSC D1</a></div>
<div class="button" id="buttona"><a href="http://bierens42.woelmuis.nl/output/standmaken.php?competitie=ZSC D2&soort=Competitie&deel=najaar" target=contentframe>ZSC D2</a></div>
<div class="button" id="buttona"><a href="http://bierens42.woelmuis.nl/output/standmaken.php?competitie=ZSC D2&soort=Competitie&deel=najaar" target=contentframe>ZSC E1</a></div>
<div class="button" id="buttona"><a href="http://bierens42.woelmuis.nl/output/standmaken.php?competitie=ZSC D2&soort=Competitie&deel=najaar" target=contentframe>ZSC E2</a></div>
<div class="button" id="buttona"><a href="http://bierens42.woelmuis.nl/output/standmaken.php?competitie=ZSC D2&soort=Competitie&deel=najaar" target=contentframe>ZSC F1</a></div>
<div class="button" id="buttona"><a href="http://bierens42.woelmuis.nl/output/standmaken.php?competitie=ZSC D2&soort=Competitie&deel=najaar" target=contentframe>ZSC F2</a></div>
<div class="button" id="buttona"><a href="http://bierens42.woelmuis.nl/output/standmaken.php?competitie=ZSC D2&soort=Competitie&deel=najaar" target=contentframe>ZSC F3</a></div>
<div class="button" id="buttona"><a href="http://bierens42.woelmuis.nl/output/standmaken.php?competitie=ZSC D2&soort=Competitie&deel=najaar" target=contentframe>ZSC Mini 1</a></div>
<div class="button" id="buttona"><a href="http://bierens42.woelmuis.nl/output/standmaken.php?competitie=ZSC D2&soort=Competitie&deel=najaar" target=contentframe>ZSC Mini 2</a></div>
**
<div class="button"><a href=sponsors.php target=contentframe>Sponsors</a></div>
<div class="button"><a href=fotos.php target=contentframe>Foto's</a></div>
<div class="button"><a href=supver.php target=contentframe>Sup. Vereniging</a></div>
<div class="button"><a href=home.php target=contentframe>Home</a></div>
<div class="button"><a href="http://bierens42.woelmuis.nl/output/clubinfo.php" target=contentframe>Clubinfo</a></div>
<div class="button"><a href="http://bierens42.woelmuis.nl/output/afgelastingen.php" target=contentframe>Afgelastingen</a></div>
//Als ik hierop klik opent alles tussen * en *
<div class="button"><a href=menusenioren.php target=menuframe>Senioren</a></div>
<div class="button" id="buttona"><a href="http://bierens42.woelmuis.nl/output/programmasenioren1.php" target=contentframe>Programma</a></div>
<div class="button" id="buttona"><a href="http://bierens42.woelmuis.nl/output/uitslagensenioren1.php" target=contentframe>Uitslagen</a></div>
*
<div class="button" id="buttona"><a href="http://bierens42.woelmuis.nl/output/standmaken.php?competitie=ZSC 1&soort=Competitie&deel=" target=contentframe>ZSC 1</a></div>
<div class="button" id="buttona"><a href="http://bierens42.woelmuis.nl/output/standmaken.php?competitie=ZSC 2&soort=Competitie&deel=" target=contentframe>ZSC 2</a></div>
<div class="button" id="buttona"><a href="http://bierens42.woelmuis.nl/output/standmaken.php?competitie=ZSC 3&soort=Competitie&deel=" target=contentframe>ZSC 3</a></div>
<div class="button" id="buttona"><a href="http://bierens42.woelmuis.nl/output/standmaken.php?competitie=ZSC 4&soort=Competitie&deel=" target=contentframe>ZSC 4</a></div>
<div class="button" id="buttona"><a href="http://bierens42.woelmuis.nl/output/standmaken.php?competitie=ZSC 5&soort=Competitie&deel=" target=contentframe>ZSC 5</a></div>
<div class="button" id="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>
<div class="button" id="buttona"><a href="http://bierens42.woelmuis.nl/output/standmaken.php?competitie=ZSC Veteranen&soort=Competitie&deel=" target=contentframe>Veteranen</a></div>
*
//Als ik hierop klik opent alles tussen **
<div class="button"><a href=menujunioren.php target=menuframe>Junioren</a></div>
<div class="button" id="buttona"><a href="http://bierens42.woelmuis.nl/output/programmajunioren1.php" target=contentframe>Programma</a></div>
<div class="button" id="buttona"><a href="http://bierens42.woelmuis.nl/output/uitslagenjunioren1.php" target=contentframe>Uitslagen</a></div>
**
<div class="button" id="buttona"><a href="http://bierens42.woelmuis.nl/output/standmaken.php?competitie=ZSC A1&soort=Competitie&deel=" target=contentframe>ZSC A1</a></div>
<div class="button" id="buttona"><a href="http://bierens42.woelmuis.nl/output/standmaken.php?competitie=ZSC B1&soort=Competitie&deel=" target=contentframe>ZSC B1</a></div>
<div class="button" id="buttona"><a href="http://bierens42.woelmuis.nl/output/standmaken.php?competitie=ZSC C1&soort=Competitie&deel=" target=contentframe>ZSC C1</a></div>
<div class="button" id="buttona"><a href="http://bierens42.woelmuis.nl/output/standmaken.php?competitie=ZSC C2&soort=Competitie&deel=najaar" target=contentframe>ZSC C2</a></div>
<div class="button" id="buttona"><a href="http://bierens42.woelmuis.nl/output/standmaken.php?competitie=ZSC D1&soort=Competitie&deel=najaar" target=contentframe>ZSC D1</a></div>
<div class="button" id="buttona"><a href="http://bierens42.woelmuis.nl/output/standmaken.php?competitie=ZSC D2&soort=Competitie&deel=najaar" target=contentframe>ZSC D2</a></div>
<div class="button" id="buttona"><a href="http://bierens42.woelmuis.nl/output/standmaken.php?competitie=ZSC D2&soort=Competitie&deel=najaar" target=contentframe>ZSC E1</a></div>
<div class="button" id="buttona"><a href="http://bierens42.woelmuis.nl/output/standmaken.php?competitie=ZSC D2&soort=Competitie&deel=najaar" target=contentframe>ZSC E2</a></div>
<div class="button" id="buttona"><a href="http://bierens42.woelmuis.nl/output/standmaken.php?competitie=ZSC D2&soort=Competitie&deel=najaar" target=contentframe>ZSC F1</a></div>
<div class="button" id="buttona"><a href="http://bierens42.woelmuis.nl/output/standmaken.php?competitie=ZSC D2&soort=Competitie&deel=najaar" target=contentframe>ZSC F2</a></div>
<div class="button" id="buttona"><a href="http://bierens42.woelmuis.nl/output/standmaken.php?competitie=ZSC D2&soort=Competitie&deel=najaar" target=contentframe>ZSC F3</a></div>
<div class="button" id="buttona"><a href="http://bierens42.woelmuis.nl/output/standmaken.php?competitie=ZSC D2&soort=Competitie&deel=najaar" target=contentframe>ZSC Mini 1</a></div>
<div class="button" id="buttona"><a href="http://bierens42.woelmuis.nl/output/standmaken.php?competitie=ZSC D2&soort=Competitie&deel=najaar" target=contentframe>ZSC Mini 2</a></div>
**
<div class="button"><a href=sponsors.php target=contentframe>Sponsors</a></div>
<div class="button"><a href=fotos.php target=contentframe>Foto's</a></div>
<div class="button"><a href=supver.php target=contentframe>Sup. Vereniging</a></div>
Alvast hartelijk bedankt voor het meedenken!
Gewijzigd op 10/01/2013 22:27:02 door D B
2. Wat heb je al geprobeerd?
3. javascript/php/html dan noem je wel 3 talen die wel iets met elkaar gemeen hebben, maar totaal verschillend zijn, welke wil je?
4. Kijk eens naar de HTML tags en hun betekenissen, een menu hoort in een lijst thuis.
Ook zie ik dat je Woelmuis gebruikt, vergeet niet dat die hun server al 4 jaar niet geupdated hebben, en dat ze veel functionaliteit missen.
@WouterJ
Ik heb het nu doormiddel van puur html met css, maar nu roep ik dus een iframe op en dit lijkt me niet het beste.
1) Mijn menu bij Junioren en bij Senioren uit laten klappen zodat dan de teams zichtbaar worden
2) Ik heb alles al 'netjes'(in IE) opgemaakt in html/css
3) I know, maar ben begonnen met html en las wat over javascript (waar ik zelf helemaal geen kaas van gegeten heb)
4) Op dit punt was ik inderdaad uitgekomen, maar toen zag ik dat er met javascript ook veel mogelijk was en dacht ik om me daar wat meer in te verdiepen
@Aar
1) Het list (ul/li) heb ik inderdaad nog niet gebruikt (daar was ik nu eigenlijk op uit gekomen) en toen dacht ik/en las ik, over javascript.
2) Woelmuis gebruik ik puur als testserver :)
Als testserver zou ik Woelmuis zeker niet gebruiken, omdat je tegen tekorten aan kan lopen. Gebruik dan WAMPP of een beveiligd-subdomeintje op je hosting.
Tevens moet je dit met HTML en CSS alleen doen, zie bijv. deze tut: http://sceneone.nl/tips_tricks/drop_down_menu.php
Bedankt!
Toevoeging op 11/01/2013 10:06:54:
Ik ben nu een aardig eindje op weg.
Toch zit ik nog met een paar probleempjes.
1) Is het mogelijk om het drop-downmenu bij :active te zien ipv :hover?
2) Mijn :active (back-ground color veranderen) werkt nu niet meer? Wat doe ik daar fout?
3) Als ik mijn home als 'standaardactive' wil zetten, doe ik dit dan door deze in een aparte class te zetten?
Hieronder mijn scripts: [link]http://bierens42.woelmuis.nl/testsite[/link]
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">Sup. 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">Sup. Vereniging</a></div></li>
</ul>
</div>
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
79
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
/*MENU*/
#menuul, #menuul ul {
list-style:none;
margin:0px;
padding:0px;
}
#menuul li {
width:120px;
}
#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:16px;
margin:1px 0 0 0;
}
#menuul li div.buttona {
border-top:1px solid black;
border-bottom:1px solid black;
text-align:left;
font-size:12px;
height:16px;
margin:1px 0 0 0;
}
#menuul li div.button a{
padding-left:5px;
}
#menuul li div.buttona a{
padding-left:40px;
}
#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:120px;
}
#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:16px;
margin:1px 0 0 0;
}
#menuul li div.buttona {
border-top:1px solid black;
border-bottom:1px solid black;
text-align:left;
font-size:12px;
height:16px;
margin:1px 0 0 0;
}
#menuul li div.button a{
padding-left:5px;
}
#menuul li div.buttona a{
padding-left:40px;
}
#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;
}
/**/
Zoiets inderdaad maar dit gebeurt dmv javascript of niet?
ja daar zit een javascript achter
Danny, je hebt een verkeerd begrip van :active. :active betekend het moment dat je er op klikt. Wat jij wilt is de button stijlen als je op de pagina bent, in zo'n geval moet je met een CSS class werken.
Wat ik bedoel is dat ik nu bij :hover mijn submenu te zien krijg en vraag me ook af of het kan als ik op mijn hoofdmenu item klik ipv alleen erover heen gaan dus dacht ik :active ipv :hover (in mijn css) .
Eerst had ik ook kleursveranderingen bij :active maar die zie ik nu ook niet meer.
Hebben we het over dezelfde :active :)
Toevoeging op 11/01/2013 21:38:34:
@Wouter
Na je bericht nog eens gelezen te hebben denk ik dat ik weet waarover wij verschillend denken
Wat jij aangeeft met die class is als ik meerdere malen mijn menu aan roep door het gebruik van verschillende pagina's.
Nu heb ik mijn ontwerp zo dat eigenlijk alles in mijn index.php staat en dat alle links binnen de pagina (in een frame openen, voorheen toen ik zonder <ul> en <li> werkte werden dan mijn :active link en :visited dan ook een andere kleur.
Begrijp je het nog een beetje? :)
Nu vraag ik me dus af of ik dat :active op een link werkend kan krijgen en dan dus ook ipv :hover op mijn dropdown :active kan gebruiken.
Alvast bedankt voor de hulp!
Gewijzigd op 11/01/2013 21:40:05 door D B