WebKnutselaarsHulpjes Webknutselaarshulpjes logo

WebKnutselaarsHulpjes

Zo blij  

Uitklapmenu dmv. JavaScript en een beetje CSS

Eenvoudig uitklapmenu voor meerdere links onder een menuitem.
Werkt zowel met de muis als het toetsenbord.

Ga met de muis over 'Hoofditem', of ga met de 'Tab' toets naar 'Hoofditem', om het effect te zien.

Doordat de submenuitems in de broncode staan worden ze door de zoekmachines wel geïndexeerd.

Zet dit (groene) stukje in het <head> gedeelte van de pagina.

<style type="text/css" media="all">
<!--
#hoofdmenu {
width : 100px;
height : auto;
}

#hoofdmenu a {
font-weight : bold;
text-decoration : none;
color : #0000FF;
height : 18px;
display : block;
}

#hoofdmenu a:hover {
color : #FF0000;
}

#subitem {
background-color : #fff;
display : none;
z-index : 100;
}

#subitem:hover {
display : block;
}

#subitem a {
font-weight : normal;
}
// -->
</style>


<script language="JavaScript" type="text/javascript">
<!--
vertraagverberg='';

function laatSubzien() {
clearTimeout(vertraagverberg);
document.getElementById('subitem').style.display = "block";
}

function verbergSub() {
vertraagverberg=setTimeout("document.getElementById('subitem').style.display = 'none'",700);
}

function subMenuzien() {
clearTimeout(vertraagverberg);
}
// -->
</script>

Zet dit (groene) stukje in het <body> gedeelte van de pagina.

<div id="hoofdmenu">
<a id="hoofditem" href="#" onMouseover="laatSubzien()" onFocus="laatSubzien();style.textDecoration='underline'" onMouseout="verbergSub()" onBlur="verbergSub();style.textDecoration='none'">Hoofditem</a>
<div id="subitem">
<a href="#" onMouseover="subMenuzien();" onFocus="subMenuzien();style.fontWeight='bold'" onMouseout="verbergSub()" onBlur="verbergSub();style.fontWeight='normal'">Subitem 1</a>
<a href="#" onMouseover="subMenuzien()" onFocus="subMenuzien();style.fontWeight='bold'" onMouseout="verbergSub()" onBlur="verbergSub();style.fontWeight='normal'">Subitem 2</a>
<a href="#" onMouseover="subMenuzien()" onFocus="subMenuzien();style.fontWeight='bold'" onMouseout="verbergSub()" onBlur="verbergSub();style.fontWeight='normal'">Subitem 3</a>
<a href="#" onMouseover="subMenuzien()" onFocus="subMenuzien();style.fontWeight='bold'" onMouseout="verbergSub()" onBlur="verbergSub();style.fontWeight='normal'">Subitem 4</a>
</div><!-- einde subitem -->
</div><!-- einde hoofdmenu -->

De '#'jes en teksten in het voorbeeld vervang je door de juiste gegevens.

Verder zijn kleuren en dergelijke vanzelfsprekend naar eigen inzicht aan te passen.

Divider

WebKnutselaarsHulpjesDisclaimer: de auteur van WebKnutselaarsHulpjes zal geen enkele aansprakelijkheid aanvaarden voor schadelijke gevolgen, lichamelijke klachten, slapeloze nachten, of enig ander gevolg van het gebruik van de hier getoonde voorbeelden.