Voortgezet onderwijs | ThinkQuest Jr Webplek

Kennisnet.nl

Hoe maak je een..Uitklapmenu

Gepubliceerd op 24 april 2006

Om goed door grote websites te navigeren zijn grotere menu's gewenst, waarbij delen van dit menu de rest van de pagina overlappen.

Dit menu wordt gevormd door een combinatie van HTML, CSS en Javascript. Hierbij wordt gebruik gemaakt van de eigenschap dat men CSS elementen een absolute positie kan toewijzen, waarbij deze tevens elkaar kunnen overlappen (en dus lagen ontstaan). Als de muisaanwijzer over een van de hoofdmenuitems gaat klapt bijbehorend submenu uit

Methode met HTML, CSS, Javascript en het DOM [ aangeraden]
Bekijk hieronder het voorbeeld en download de broncode:
Bekijk hier een simpel uitklapmenu
Download hier de broncode van het uitklapmenu [HTML 1 Kb ]

Gerelateerde kennis

Basiscursus Javascript en het D.O.M. (artikel)
Inhoudsopgave (Hoe maak je een..)

De HTML code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head><title></title>
<style type="text/css" title="style" media="screen, projection">
ul {
  padding: 0;
  margin: 0;
  list-style: none;
  }
li {
  float: left;
  position: relative;
  width: 100px;
  }
li ul {
  display: none;
  position: absolute; 
  top: 1em;
  left: 0;
  }
li > ul {
 top: auto;
 left: auto;
 }
li:hover ul, li.over ul{ display: block; }
</style>
<script type="text/javascript">
function startList() 
{
if (document.all && document.getElementById)
{
 navRoot = document.getElementById("nav");
 for (i=0; i<navRoot.childNodes.length; i++) 
 {
  node = navRoot.childNodes[i];
  if (node.nodeName=="LI") 
  {
   node.onmouseover=function() 
   {
   this.className+=" over";
   }
   node.onmouseout=function() 
   {
    this.className=this.className.replace(" over", "");
   }
  }
 }
}
}
window.onload = startList;
</script>
</head>
<body>
<ul id="nav">
  <li>Menu item 1
    <ul>
      <li><a href="#">menu item 1a</a></li>
      <li><a href="#">menu item 1b</a></li>
      <li><a href="#">menu item 1c</a></li>
      <li><a href="#">menu item 1d</a></li>
  </ul>
 </li>
  <li>Menu item 2
    <ul>
      <li><a href="#">menu item 2a</a></li>
      <li><a href="#">menu item 2b</a></li>
      <li><a href="#">menu item 2c</a></li>
    </ul>
  </li>
  <li>Menu item 3
    <ul>
      <li><a href="#">menu item 3a</a></li>
      <li><a href="#">menu item 3b</a></li>
      <li><a href="#">menu item 3c</a></li>
      <li><a href="#">menu item 3d</a></li>
      <li><a href="#">menu item 3e</a></li>
    </ul>
  </li>
</ul>
</body>
</html>

bron: http://www.alistapart.com/articles/dropdowns

LET OP: Het is slimmer om de Javascript en CSS code in een eigen bestand te plaatsen en vanuit de HTML pagina te verwijzen met respectievelijk:

Verdere uitleg en varianten
Op dit moment lijken de artikelen van A List Apart de meest simpele en robuuste oplossingen voor uitklapmenu's in allerlei varianten te bieden:
http://www.alistapart.com/articles/dropdowns
http://www.alistapart.com/articles/horizdropdowns
http://www.alistapart.com/articles/hybrid