WebKnutselaarsHulpjes
CSS buttons Diashow 1 Diashow 2 Imagemap JS-Klokje Websafe Kleuren Laadtijd Meten Meta-tags Mouseover Plaatjes Beschermen Popups 1 Popups 2 Popups 3 Pagina Verversen Uitklapmenu 1 Uitklapmenu 2 Textures Reactie Home
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>
<!--
#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 -->
<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.
