WebKnutselaarsHulpjes Webknutselaarshulpjes logo

WebKnutselaarsHulpjes

Zo blij  

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>

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 -->

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.

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.