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 meerde menuitems Javascript en CSS werkt ook met tab-toets
Eenvoudig uitklapmenu voor meerdere links onder horizontale menuitems.
Navigeren kan met muis maar ook met de tab-toets.
Ga met de muis over een 'Hoofditem', of ga met de 'Tab' toets naar een '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 {
position : relative;
top : 0;
left : 0;
width : 200px;
height : auto;
}
#hoofdmenu a {
font-weight : bold;
text-decoration : none;
color : #0000FF;
width : 100px;
height : 18px;
display : block;
float : left;
}
#hoofdmenu a:hover {
color : #FF0000;
}
#subitem1 {
position : absolute;
top : 15px;
left : 0px;
background-color : #ccc;
display : none;
width : 90px;
height : auto;
padding : 5px;
z-index : 100;
}
#subitem1:hover {
display : block;
}
#subitem1 a {
font-weight : normal;
display : block;
float : none;
}
#subitem2 {
position : absolute;
top : 15px;
left : 100px;
background-color : #ccc;
display : none;
width : 90px;
height : auto;
padding : 5px;
z-index : 100;
}
#subitem2:hover {
display : block;
}
#subitem2 a {
font-weight : normal;
display : block;
float : none;
}
// -->
</style>
<script language="JavaScript" type="text/javascript">
<!--
vertraagverberg1='';
vertraagverberg2='';
function laatSubzien1() {
clearTimeout(vertraagverberg1);
document.getElementById('subitem2').style.display = "none";
document.getElementById('subitem1').style.display = "block";
}
function verbergSub1() {
vertraagverberg1=setTimeout("document.getElementById('subitem1').style.display = 'none'",700);
}
function subMenuzien1() {
clearTimeout(vertraagverberg1);
}
function laatSubzien2() {
clearTimeout(vertraagverberg2);
document.getElementById('subitem1').style.display = "none";
document.getElementById('subitem2').style.display = "block";
}
function verbergSub2() {
vertraagverberg2=setTimeout("document.getElementById('subitem2').style.display = 'none'",700);
}
function subMenuzien2() {
clearTimeout(vertraagverberg2);
}
// -->
</script>
<!--
#hoofdmenu {
position : relative;
top : 0;
left : 0;
width : 200px;
height : auto;
}
#hoofdmenu a {
font-weight : bold;
text-decoration : none;
color : #0000FF;
width : 100px;
height : 18px;
display : block;
float : left;
}
#hoofdmenu a:hover {
color : #FF0000;
}
#subitem1 {
position : absolute;
top : 15px;
left : 0px;
background-color : #ccc;
display : none;
width : 90px;
height : auto;
padding : 5px;
z-index : 100;
}
#subitem1:hover {
display : block;
}
#subitem1 a {
font-weight : normal;
display : block;
float : none;
}
#subitem2 {
position : absolute;
top : 15px;
left : 100px;
background-color : #ccc;
display : none;
width : 90px;
height : auto;
padding : 5px;
z-index : 100;
}
#subitem2:hover {
display : block;
}
#subitem2 a {
font-weight : normal;
display : block;
float : none;
}
// -->
</style>
<script language="JavaScript" type="text/javascript">
<!--
vertraagverberg1='';
vertraagverberg2='';
function laatSubzien1() {
clearTimeout(vertraagverberg1);
document.getElementById('subitem2').style.display = "none";
document.getElementById('subitem1').style.display = "block";
}
function verbergSub1() {
vertraagverberg1=setTimeout("document.getElementById('subitem1').style.display = 'none'",700);
}
function subMenuzien1() {
clearTimeout(vertraagverberg1);
}
function laatSubzien2() {
clearTimeout(vertraagverberg2);
document.getElementById('subitem1').style.display = "none";
document.getElementById('subitem2').style.display = "block";
}
function verbergSub2() {
vertraagverberg2=setTimeout("document.getElementById('subitem2').style.display = 'none'",700);
}
function subMenuzien2() {
clearTimeout(vertraagverberg2);
}
// -->
</script>
Zet dit (groene) stukje in het <body> gedeelte van de pagina.
<div id="hoofdmenu">
<a tabindex="20" id="hoofditem1" href="#" onMouseover="laatSubzien1()" onFocus="laatSubzien1();style.textDecoration='underline'" onMouseout="verbergSub1()" onBlur="verbergSub1();style.textDecoration='none'">Hoofditem 1</a>
<div id="subitem1">
<a tabindex="21" href="#" onMouseover="subMenuzien1();" onFocus="subMenuzien1();style.fontWeight='bold'" onMouseout="verbergSub1()" onBlur="verbergSub1();style.fontWeight='normal'">Subitem 1</a>
<a tabindex="22" href="#" onMouseover="subMenuzien1()" onFocus="subMenuzien1();style.fontWeight='bold'" onMouseout="verbergSub1()" onBlur="verbergSub1();style.fontWeight='normal'">Subitem 2</a>
<a tabindex="23" href="#" onMouseover="subMenuzien1()" onFocus="subMenuzien1();style.fontWeight='bold'" onMouseout="verbergSub1()" onBlur="verbergSub1();style.fontWeight='normal'">Subitem 3</a>
<a tabindex="24" href="#" onMouseover="subMenuzien1()" onFocus="subMenuzien1();style.fontWeight='bold'" onMouseout="verbergSub1()" onBlur="verbergSub1();style.fontWeight='normal'">Subitem 4</a>
</div><!-- einde subitem1 --> <a tabindex="30" id="hoofditem2" href="#" onMouseover="laatSubzien2()" onFocus="laatSubzien2();style.textDecoration='underline'" onMouseout="verbergSub2()" onBlur="verbergSub2();style.textDecoration='none'">Hoofditem 2</a>
<div id="subitem2">
<a tabindex="31" href="#" onMouseover="subMenuzien2();" onFocus="subMenuzien2();style.fontWeight='bold'" onMouseout="verbergSub2()" onBlur="verbergSub2();style.fontWeight='normal'">Subitem 5</a>
<a tabindex="32" href="#" onMouseover="subMenuzien2()" onFocus="subMenuzien2();style.fontWeight='bold'" onMouseout="verbergSub2()" onBlur="verbergSub2();style.fontWeight='normal'">Subitem 6</a>
<a tabindex="33" href="#" onMouseover="subMenuzien2()" onFocus="subMenuzien2();style.fontWeight='bold'" onMouseout="verbergSub2()" onBlur="verbergSub2();style.fontWeight='normal'">Subitem 7</a>
<a tabindex="34" href="#" onMouseover="subMenuzien2()" onFocus="subMenuzien2();style.fontWeight='bold'" onMouseout="verbergSub2()" onBlur="verbergSub2();style.fontWeight='normal'">Subitem 8</a>
</div><!-- einde subitem1 -->
</div><!-- einde hoofdmenu -->
<a tabindex="20" id="hoofditem1" href="#" onMouseover="laatSubzien1()" onFocus="laatSubzien1();style.textDecoration='underline'" onMouseout="verbergSub1()" onBlur="verbergSub1();style.textDecoration='none'">Hoofditem 1</a>
<div id="subitem1">
<a tabindex="21" href="#" onMouseover="subMenuzien1();" onFocus="subMenuzien1();style.fontWeight='bold'" onMouseout="verbergSub1()" onBlur="verbergSub1();style.fontWeight='normal'">Subitem 1</a>
<a tabindex="22" href="#" onMouseover="subMenuzien1()" onFocus="subMenuzien1();style.fontWeight='bold'" onMouseout="verbergSub1()" onBlur="verbergSub1();style.fontWeight='normal'">Subitem 2</a>
<a tabindex="23" href="#" onMouseover="subMenuzien1()" onFocus="subMenuzien1();style.fontWeight='bold'" onMouseout="verbergSub1()" onBlur="verbergSub1();style.fontWeight='normal'">Subitem 3</a>
<a tabindex="24" href="#" onMouseover="subMenuzien1()" onFocus="subMenuzien1();style.fontWeight='bold'" onMouseout="verbergSub1()" onBlur="verbergSub1();style.fontWeight='normal'">Subitem 4</a>
</div><!-- einde subitem1 --> <a tabindex="30" id="hoofditem2" href="#" onMouseover="laatSubzien2()" onFocus="laatSubzien2();style.textDecoration='underline'" onMouseout="verbergSub2()" onBlur="verbergSub2();style.textDecoration='none'">Hoofditem 2</a>
<div id="subitem2">
<a tabindex="31" href="#" onMouseover="subMenuzien2();" onFocus="subMenuzien2();style.fontWeight='bold'" onMouseout="verbergSub2()" onBlur="verbergSub2();style.fontWeight='normal'">Subitem 5</a>
<a tabindex="32" href="#" onMouseover="subMenuzien2()" onFocus="subMenuzien2();style.fontWeight='bold'" onMouseout="verbergSub2()" onBlur="verbergSub2();style.fontWeight='normal'">Subitem 6</a>
<a tabindex="33" href="#" onMouseover="subMenuzien2()" onFocus="subMenuzien2();style.fontWeight='bold'" onMouseout="verbergSub2()" onBlur="verbergSub2();style.fontWeight='normal'">Subitem 7</a>
<a tabindex="34" href="#" onMouseover="subMenuzien2()" onFocus="subMenuzien2();style.fontWeight='bold'" onMouseout="verbergSub2()" onBlur="verbergSub2();style.fontWeight='normal'">Subitem 8</a>
</div><!-- einde subitem1 -->
</div><!-- einde hoofdmenu -->
De '#'jes en teksten in het voorbeeld vervang je vanzelfsprekend door de je eigen gegevens.
Kleuren en lay-out zijn naar eigen inzicht aan te passen.
