JavaScript/CSS flikmenyn med sub-navigation (3 / 4 steg)
Steg 3: JavaScript
Nu ska vi gå till JavaScript som kommer att kontrollera Visa och dölja vår sub menyalternativ. Vi vill att objekten i vår sub menyn för att ändra på musklick, baserat på vilken förälder flik klickade.Först ska vi börja genom att skriva en funktion för att dölja alla menyalternativ i våra "subNav" behållaren.
Den nedan funktion blir en lista över alla UL element i subNav ID, då loopar igenom listan och varje element display egenskapen till ingen
fungera hideItems() {var list = document.getElementById("subNav").getElementsByTagName("ul"); för (jag = 0; jag < list.length;i++) {lista [i].style.display = "ingen";}}
Okej, nu Låt oss börja skriva funktionen för att visa undermeny objekt.
fungera navMenu() {om (! document.getElementsByTagName) {return;} var ankare = document.getElementsByTagName('a');
Den första raden i vår funktion är en felsäker som helt enkelt talar om för webbläsaren att följa länken om den inte stöder funktionen "getElementsByTagName".
Den andra raden, liknar funktionen ovan, får en lista över alla länkar och sätter dem i en array kallas "ankare"
för (var jag = 0; jag < anchors.length; i ++) {var ankare = ankare [i]; var relAttribute = String(anchor.getAttribute('rel'));
Nu börjar vi att loopa igenom vår "ankare" matris. Här, ta vi värdet för attributet "rel" för varje länk som vi kommit till den.
om (relAttribute.toLowerCase().match('menutrigger')) {anchor.onclick = function() {
Nu kontrollera vi om "rel" värdet (som vi lagras som "relattribute") är lika med "menutrigger" och om så, vi kommer att utlösa vår klickhändelsen.
var nameAttribute = this.getAttribute('name') + "Nav"; var thismenu = document.getElementById(nameAttribute); hideItems(); thismenu.style.display="inline"; returnera false; } } }}
Först, vi lägga till text "Nav" i slutet av länkens namnattribut. Nu matchar vår nya nameAttribute värdet namnet på menyn sub-nav vi ska påverka!
Så då vi ta denna undermeny och tilldela den till variabeln "thismenu".
Nu dölja vi alla våra tidigare visad undermenyer genom att funktionen "hideItems()" som vi skapade tidigare.
Vi Ställ sedan den aktuella sub-menyn uppvisning egendom till "inline" att göra den synlig.
Slutligen, tala om för webbläsaren att inte följa länken huvudmenyn (som vi bara klick) och stäng ut alla våra öppna parentes.