PHPhulp.nl PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact
D

Menu wil niet wat ik wil

Door D B op 13-01-2013 11:27
1.670 views
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

<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:

/*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;
}
/**/
jack maessen
13-01-2013 17:19 gewijzigd op 13-01-2013 17:20
het beste kun je een classe current maken en die een andere achtergrond geven


 <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:


.current{
background-color: "achtergrondkleur"
}


Maar dan moet je afstand doen van je iframe

D
D B
13-01-2013 18:01
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?
B
Bart Roelofs
15-01-2013 16:48
Mag ik vragen waarom je een Iframe gebruikt?

Inmiddels werkt het weer geloof ik te zien?

Met vriendelijke groeten,
Bart Roelofs
D
D B
15-01-2013 17:08
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.
B
Bart Roelofs
15-01-2013 17:19
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
D B
15-01-2013 18:22
Dat cms verhaal klinkt goed, maar daar ga ik me eerst maar wat in verdiepen.

Reageren

Inloggen om te reageren