Menu wil niet wat ik wil

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

D B

D B

13/01/2013 11:27:31
Quote Anchor link
Hallo hulpvrienden,

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)
PHP script in nieuw venster Selecteer het PHP script
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
<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&amp;soort=Competitie&amp;deel=" target="contentframe">ZSC 1</a></div></li>
            <li><div class="buttona"><a href="http://bierens42.woelmuis.nl/output/standmaken.php?competitie=ZSC 2&amp;soort=Competitie&amp;deel=" target="contentframe">ZSC 2</a></div></li>
            <li><div class="buttona"><a href="http://bierens42.woelmuis.nl/output/standmaken.php?competitie=ZSC 3&amp;soort=Competitie&amp;deel=" target="contentframe">ZSC 3</a></div></li>
            <li><div class="buttona"><a href="http://bierens42.woelmuis.nl/output/standmaken.php?competitie=ZSC 4&amp;soort=Competitie&amp;deel=" target="contentframe">ZSC 4</a></div></li>
            <li><div class="buttona"><a href="http://bierens42.woelmuis.nl/output/standmaken.php?competitie=ZSC 5&amp;soort=Competitie&amp;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&amp;soort=Competitie&amp;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&amp;soort=Competitie&amp;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&amp;soort=Competitie&amp;deel=" target="contentframe">ZSC A1</a></div></li>
            <li><div class="buttona"><a href="http://bierens42.woelmuis.nl/output/standmaken.php?competitie=ZSC B1&amp;soort=Competitie&amp;deel=" target="contentframe">ZSC B1</a></div></li>
            <li><div class="buttona"><a href="http://bierens42.woelmuis.nl/output/standmaken.php?competitie=ZSC C1&amp;soort=Competitie&amp;deel=" target="contentframe">ZSC C1</a></div></li>
            <li><div class="buttona"><a href="http://bierens42.woelmuis.nl/output/standmaken.php?competitie=ZSC C2&amp;soort=Competitie&amp;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&amp;soort=Competitie&amp;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&amp;soort=Competitie&amp;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&amp;soort=Competitie&amp;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&amp;soort=Competitie&amp;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&amp;soort=Competitie&amp;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&amp;soort=Competitie&amp;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&amp;soort=Competitie&amp;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&amp;soort=Competitie&amp;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&amp;soort=Competitie&amp;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)
PHP script in nieuw venster Selecteer het PHP script
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
/*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;
}
/**/
 
PHP hulp

PHP hulp

30/11/2020 08:49:27
 
Jack maessen

jack maessen

13/01/2013 17:19:51
Quote Anchor link
het beste kun je een classe current maken en die een andere achtergrond geven

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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>


En in je css:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
.current{
background-color: "achtergrondkleur"
}


Maar dan moet je afstand doen van je iframe
Gewijzigd op 13/01/2013 17:20:25 door jack maessen
 
D B

D B

13/01/2013 18:01:49
Quote Anchor link
Daar ga ik inderdaad nog eens over denken / aan werken.

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?
 
Bart Roelofs

Bart Roelofs

15/01/2013 16:48:42
Quote Anchor link
Mag ik vragen waarom je een Iframe gebruikt?

Inmiddels werkt het weer geloof ik te zien?

Met vriendelijke groeten,
Bart Roelofs
 
D B

D B

15/01/2013 17:08:28
Quote Anchor link
Het werkt uiteindelijk inderdaad :)

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.
 
Bart Roelofs

Bart Roelofs

15/01/2013 17:19:35
Quote Anchor link
Ikzelf ben zoiso geen voorstander van iframes. Maar is een cms geen optie? Wordpress misschien?

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
 
D B

D B

15/01/2013 18:22:50
Quote Anchor link
Dat cms verhaal klinkt goed, maar daar ga ik me eerst maar wat in verdiepen.
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.