subitems Dropdown menu tonen bij click

[TJansen]

Goedemiddag,

Ik ben bezig een website te maken en wil hiervoor een dropdown menu gebruiken. Ik krijg het echter niet voor elkaar dat de subitems pas getoond worden als op het hoofditem wordt geklikt. Ik heb het idee dat ik iets over het hoofd zie en heb al diverse dingen geprobeerd. Ik heb al scriptjes gevonden zoals simple_css (wellicht bekend) maar ik daar gebruiken ze de uitklapfunctie bij een mouse-over en ik ben niet in staat dit om te bouwen, naar uitklappen een klik...

Wie heeft er een oplossing met waarschijnlijk javascript zodat in onderstaand voorbeeld sub 1,2 en 3 pas getoond worden als er op item 3 geklikt wordt...

het zal er dan ongeveer zo uitzien:

<ul>
<li>
<h2>Hoofdmenu</h2>
<ul>

<li><a href="#">item1</a></li>
<li><a href="#">item2</a></li>
<li>
<ul>
<a href="#">item3</a>
<li><a href="#">sub1</a></li>
<li><a href="#">Sub2</a></li></ul>

</li>
<li><a href="#">item4</a></li>
<li><a href="#">item5</a></li>
</ul>
</li>


De opmaak heb ik al voor elkaar, nu de uitklapfunctie nog. voor de duidelijkheid heb ik een printscreentje van hoe het menu nu getoond wordt..

alvast bedankt voor de hulp!

 

[Mr Wolf]

<div style="height:20; overflow:hidden;" onmouseover="this.style.height=60;" onmouseout="this.style.height=20;">
<a href="pagina.iets">Hoofd item</a>
<a href="hoi.iets">hoi</a>
<a href="hiephoi.iets">hiephoi</a></div>

De getalletjes 20, 60 en 20 moet je misschien nog aanpassen, en via css kan je de <a>'s evt. een andere kleur geven

Mr. Wolf

 

[That Guy]

- of je gebruikt pure CSS om het menu klapbaar te maken. Makkelijker, beter, en zonder Javascript. Nu, ik ga geen code voor je maken, ik krijg er niet voor betaald; maar kijk eens rond op google.

Overgens ben ik van plan zelf eens even een korte tutorial te schrjven over dit onderwerk, maar daar zal je nog even op moeten wachten.