Stap 3: De JavaScript
Nu laten we overgaan tot de JavaScript die het tonen en verbergen van onze sub menu-items bepalen zal. Wij willen dat de items in onze submenu te veranderen op een muisklik, op basis van welk tabblad van de bovenliggende is geklikt.Ten eerste zullen we beginnen door het schrijven van een functie om te verbergen van de menu-items in onze "subNav"-container.
De onder functie krijgt u een lijst met alle UL-elementen binnen de subNav-ID, en vervolgens doorlopen van die lijst en van elk element weergegeven eigenschap op 'geen'
function hideItems() { var list = document.getElementById("subNav").getElementsByTagName("ul"); for(i=0;i<list.length;i++) { list[i].style.display="none"; }}
Oke, nu laten we beginnen met het schrijven van de functie het submenu-items worden weergegeven.
function navMenu() { if (!document.getElementsByTagName){ return; } var anchors = document.getElementsByTagName('a');
De eerste regel van onze functie is een failsafe die gewoon de browser vertelt te volgen van de link als het niet wordt ondersteund door de functie 'getElementsByTagName'.
De tweede regel, vergelijkbaar met de bovenstaande functie krijgt van een lijst van alle links en zet ze in een array genaamd "ankers"
for (var i=0; i<anchors.length; i++){ var anchor = anchors[i]; var relAttribute = String(anchor.getAttribute('rel'));
Nu beginnen we aan onze 'ankers' array doorlopen. We grijpen hier, de waarde van het attribuut 'rel' voor elke koppeling als we aan komen.
if (relAttribute.toLowerCase().match('menutrigger')){ anchor.onclick = function() {
Nu controleren we om te zien of dat 'rel' waarde (die we opgeslagen als 'relattribute') gelijk aan 'menutrigger is' en indien zo, we gonna onze op-Klik op gebeurtenis.
var nameAttribute = this.getAttribute('name') + "Nav"; var thismenu = document.getElementById(nameAttribute); hideItems(); thismenu.style.display="inline"; return false; } } }}
Ten eerste, we de tekst 'Nav' toevoegen aan het einde van het kenmerk name van de koppeling. Nu is onze nieuwe nameAttribute waarde overeenkomt met de naam van het menu van de sub-nav we zullen van invloed zijn op!
Dus toen we grijpen die submenu en toewijzen aan de variabele 'thismenu'.
Nu verbergen we alles van onze eerder weergegeven sub-menu's door het aanroepen van de functie van de 'hideItems()' we eerder hebt gemaakt.
Vervolgens, wij de huidige sub-menu's weergave eigenschap instellen op 'in line' deze zichtbaar te maken.
Tot slot vertelt de browser niet te volgen de hoofdmenu-koppeling (die we klikte) en sluit alle van onze open haakjes in te vullen.