Registreren

[Funkwurm]

Inleiding
Iets wat veel terug komt op website's zijn menu's, en er zijn dan ook veel manieren om een menu te maken. Dit is er een van. Om dit script te gebruiken moet je het volgende doen.


Maak een menu
Maak een simpel HTML menu met de <ul> en <li> tags. Wat vooral de bedoeling is is dat je dit nest, dus dat een <li> ook weer een <ul> bevat die op zijn beurt natuurlijk weer <li>'s heeft, enz. Zorg dat de allerbuitenste <ul> als id menu heeft, zoals in dit voorbeeld:

HTML

Code: Alles selecteren

<ul id="menu">
   <li>Item 1</li>
   <li>Item 2
      <ul>
         <li>Subitem 2.1</li>
         <li>Subitem 2.2</li>
      </ul>
   </li>
   <li>Item 3</li>
</ul>

De code
Voeg deze code toe aan je pagina, je kunt de CSS naar eigen smaak wijzigen, maar hou eigenschappen die betrekking hebben op positionering in tact.

Javascript

Code: Alles selecteren

<style type="text/css">
/* CSS and JavaScript done by funkwurm and dexus */
ul {
   list-style:none;
   margin:0;
   left:1em;
   border-top:1px solid #ccc;
   position:relative;
   padding:0 0 1em;
   width:120px;
}
li {
   cursor:default;
   margin:0;
   padding:0;
   position:relative;
   border: 1px solid #ccc;
   border-top:0;
   background-color:#fff;
}
li.sub {
   border-right:6px solid #0a0;
   cursor:pointer;
}
ul.sub {
   display:none;
   position:absolute;
   top:0;
   left:120px;
}
</style>
<script type="text/javascript">
function Node(obRef)
{
   this.obRef=obRef;
   this.timeRef=null;
}
myNodes=new Array();

function isParent(kind, ouder)
{
   oudere=kind.parentNode;
   do
   {
      oudere=oudere.parentNode;
      if (oudere==ouder)
      {
         return true;
      }
   }
   while (oudere.nodeName!='BODY')
   return false;
}

function showSub(showNode)
{
   if (isNaN(showNode.rIndex))
   {
      showNode.rIndex=myNodes.length;
      myNodes[showNode.rIndex]=new Node(showNode);
   }
   else
   {
      clearTimeout(myNodes[showNode.rIndex].timeRef);
   }
   temp='';
   for (i in myNodes)
   {
      if (!isParent(myNodes[i].obRef, showNode))
      {
         clearTimeout(myNodes[i].timeRef);
         doHide(myNodes[i].obRef);
      }
   }
   for (i in showNode.childNodes)
   {
      if (showNode.childNodes[i].nodeType==1)
      {
         showNode.childNodes[i].style.display='block';
      }
   }
}

function hideSub(hideNode)
{
   myNodes[hideNode.rIndex].timeRef=setTimeout('doHide(myNodes['+hideNode.rIndex+'].obRef)', 500);
}

function doHide(doNode)
{
   for (i in doNode.childNodes)
   {
      if (doNode.childNodes[i].nodeType==1 && doNode.childNodes[i].nodeName=='UL')
      {
         doNode.childNodes[i].style.display='none';
      }
   }
}
window.onload=function()
{
   var li = document.getElementById('menu').getElementsByTagName('li');
   var ul;
   for (i in li)
   {
      if(!isNaN(i))
      {
         ul = li[i].childNodes;
         for(j in ul)
         {
            if(ul[j].nodeName == 'UL')
            {
               ul[j].className = li[i].className = 'sub';
               li[i].onmouseover = function ()
               {
                  showSub(this);
               }
               li[i].onmouseout = function ()
               {
                  hideSub(this);
               }
            }
         }
      }
   }
}
</script>

Voorbeeld
Een voorbeeld kun hier vinden. Bekijk hem ook eens terwijl je javascript uitgeschakeld hebt, of in een tekstuele browser zoals lynx op linux. Omdat de HTML alleen simpele <ul>'s en <li>'s zijn is je menu ook in deze browsers bruikbaar.