Menu buttons

1. Wat wil je?
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.

Is het niet verstandig om eens te kijken naar lists om je menu in op te maken (ul/li)? Dit is zo veel flexibeler in combinatie met CSS en :hover acties.

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.

Beide bedankt voor de reactie!

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

Javascript is iets waar je het laatste naar moet kijken. Met CSS kan je al complete uitklapmenu's maken.

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.

Ehhh, Danny. JavaScript is een tool waarmee je interactie met de gebruiker kunt toevoegen aan je website, het is niet of het een of het ander, goede semantische HTML is taak 1 van elk HTML en CSS script dat je maakt.

Tevens moet je dit met HTML en CSS alleen doen, zie bijv. deze tut: http://sceneone.nl/tips_tricks/drop_down_menu.php

Ik ga morgen eens goed naar die tutorial kijken.

Bedankt!

[size=xsmall]Toevoeging op 11/01/2013 10:06:54:[/size]

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]

		<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">Sup. Vereniging</a></div></li>
			</ul>
		</div>

/*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;
}
/**/

je bedoelt zoiets als :active menu; bij klikken rolt ie uit en blijven de subs staan
http://www.dynamicdrive.com/dynamicindex17/ddaccordionmenu-glossy.htm

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.