Schritt 3: Das JavaScript
Jetzt gehen wir zu den JavaScript-Code, mit denen die ein- und Ausblenden von unserem Untermenüpunkte gesteuert wird. Wir wollen die Items in unserem Untermenü ändern auf Mausklick, basierend auf der Registerkarte "Elternteil" geklickt wurde.Zunächst beginnen wir durch das Schreiben einer Funktion um alle Menüelemente in unserer "SubNav" Container auszublenden.
Die unter Funktion ruft eine Liste aller UL-Elemente innerhalb der SubNav-ID, dann durchläuft in dieser Liste und setzt jedes Element Display-Eigenschaft auf 'none'
function hideItems() { var list = document.getElementById("subNav").getElementsByTagName("ul"); for(i=0;i<list.length;i++) { list[i].style.display="none"; }} Okay, jetzt fangen wir schreiben die Funktion, um die Untermenüpunkte angezeigt.
function navMenu() { if (!document.getElementsByTagName){ return; } var anchors = document.getElementsByTagName('a'); Die erste Zeile unserer Funktion ist eine fehlersichere, die einfach den Browser weist an dem Link zu folgen, wenn es die "GetElementsByTagName" Funktion nicht unterstützt.
Die zweite Zeile, vergleichbar mit der Funktion oben, ruft eine Liste aller Links und setzt sie in ein Array namens "Anker"
for (var i=0; i<anchors.length; i++){ var anchor = anchors[i]; var relAttribute = String(anchor.getAttribute('rel')); Jetzt starten wir unsere "Anker"-Array durchlaufen. Wir greifen hier, den Wert des Attributs "Rel" für jeden Link, wie wir zu ihm kommen.
if (relAttribute.toLowerCase().match('menutrigger')){ anchor.onclick = function() { Nun überprüfen wir, ob diese "Rel" Wert (die wir als "Relattribute" gespeichert) "Menutrigger" entspricht und also, wir gehen auf unsere auf Click-Ereignis auszulösen.
var nameAttribute = this.getAttribute('name') + "Nav"; var thismenu = document.getElementById(nameAttribute); hideItems(); thismenu.style.display="inline"; return false; } } }} Zuerst fügen wir den Text "Nav" bis zum Ende des Link Attribut "Name". Jetzt entspricht unsere neuen NameAttribute-Wert dem Namen des Sub-Nav-Menüs, die wir beeinflussen können!
Also wir greifen das Untermenü "und die"Thismenu"Variable zuweisen.
Jetzt verstecken wir alle unsere vorher angezeigten Untermenüs durch Aufrufen der "hideItems()"-Funktion, die wir zuvor erstellt.
Anschließend legen wir die aktuellen Untermenü Display-Eigenschaft auf 'Inline' um es sichtbar zu machen.
Schließlich geben Sie dem Browser nicht auf den Hauptmenü-Link folgen (die wir gerade geklickt) und schließen Sie alle unseren offenen Klammern.
