JavaScript/CSS Tab Menu met sub navigatie (3 / 4 stap)

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.

Gerelateerde Artikelen

Bestelling via het contact menu met de Makey Makey

Bestelling via het contact menu met de Makey Makey

Dit ziet u hoe u een eenvoudige potlood getekende menu aan een order maken door aanraking restaurant menu. Het project werd gebouwd in de ruimte van de maker van de Omaha Maker Groep. Het menu bestellen programma werd gebouwd in Scratch 2.0 aan het M
Batch Menu met log-in systeem

Batch Menu met log-in systeem

Whats up jongens? Haar candycane en ik wilde alleen maar om te laten zien jullie mijn menu met een werkend log-in systeem. Dit heeft volledig werkende functies, maar de hoofdreden die ik ben dit bestand ophangen is zodat u kerels kunt bewerken en spe
Hoe maak je Tabbed inhoud met SliceMaker producten?

Hoe maak je Tabbed inhoud met SliceMaker producten?

Dit is een video tutorial van SliceMaker producten. Via deze video tutorial, zullen we leren u hoe maak tabbed inhoud met SliceMaker producten.Zelfs als u onbekend met programmeren bent, kunt u eenvoudig met tabbladen inhoud maken. Als u geïnteressee
Hoe aangepaste CSS3 Dropdown menu's maken: CSS Dropdown tutorial voor beginners

Hoe aangepaste CSS3 Dropdown menu's maken: CSS Dropdown tutorial voor beginners

ben je moe van uw afhankelijkheid van JavaScript? Of bent u een nieuwe web-ontwikkelaar, die niet wil een derde programmeertaal samen met HTML en CSS te pakken? Dan niet nood voor kopzorg meer omdat sinds de lancering van CSS3 nu u elke soort animati
Hoe maak je een muis-gedreven Menu als EXE met behulp van Windows batchcode

Hoe maak je een muis-gedreven Menu als EXE met behulp van Windows batchcode

Dit leerprogramma zal verklaren hoe maak je een muis gedreven menu uit subs in een gecompileerde EXE te voeren. (dwz de gebruiker kiest menu-opties met een links-muis klikken.) Dit leerprogramma veronderstelt u begrijpen en vertrouwd zijn met element
Hoe kan uw software een menu van de taakbalk met behulp van wamp

Hoe kan uw software een menu van de taakbalk met behulp van wamp

In deze tutorial zal ik u tonen hoe te geven uw software een gepersonaliseerde taakbalk menu wamp.Stap 1: Download wamp ik ga u tonen hoe te downloaden van wamp voor degenen die nog nooit gehoord van het of niet hebt.Ga naar de volgende lik hieronder
How to Create met Tabs Content op een makkelijker manier?

How to Create met Tabs Content op een makkelijker manier?

Via deze video tutorial, leren we je hoe maak je pure CSS tabbed inhoud in een eenvoudiger manier en wij laten u gratis download de demo om te bewerken en te gebruiken voor uw eigen website/webpagina.Optioneel: Als u wilt weten meer over het maken va
Creëren van een Android app met behulp van Ionische

Creëren van een Android app met behulp van Ionische

Ionic is een raamwerk dat schrijven apps voor bijna alle platformen zeer gemakkelijk maakt. Als u een beetje css, js en HTML-code weet kunt u een Android / iOS of Windows app.Dit instructable zal zich richten op het maken van een Android app op een L
Website (HTML en CSS)

Website (HTML en CSS)

Hallo iedereen op instructables :)Onlangs mij zijn geweest trying te halen sommige websites en gastheer hen online om gewoon zien hoe de HTML en CSS ik geleerd uitgewerkt zodat ik maken kon een volledige grootgebrachte website met en spelen in de nab
Eenvoudige Javascript codering in HTML

Eenvoudige Javascript codering in HTML

Hallo jongens het is scherp en vandaag ik ga tonen u enkele eenvoudige en gemakkelijke bit van JavaScript codering. (niet Java)Stap 1: Kennismaking met JavaScriptJavaScript is een programmeertaal van hoog niveau, dynamische ongetypeerde en geïnterpre
Een professionele website bouwen: deel 3 CSS

Een professionele website bouwen: deel 3 CSS

CSS (Cascading Style Sheets) zijn als het brood in een PB & J sandwich. Tuurlijk, tabellen zijn oke, maar de code is veel schonere en meer doelmatige met CSS.CSS is een eenvoudige methode om stijl (bijv lettertypen, kleuren, afstand) aan Web-document
Eenvoudige MediaCenter en afstandsbediening met verbeterde Usability

Eenvoudige MediaCenter en afstandsbediening met verbeterde Usability

Ja, dat is een andere DIY PC-gebaseerde Media-Center (of HTPC), maar met een uniek kenmerk: het verdomd eenvoudig te controleren, dus geschikt voor leeftijd mensen, personen met een handicap, of gewoon lui gebruikers.Uit Wikipedia:"- Het primaire beg
Naamplaatjes maken met VCarve PRO

Naamplaatjes maken met VCarve PRO

met de opening van de TechShop in mijn stad, kwam de hemel naar de aarde! (www.techshop.ws)Een van de meest verbazingwekkende machines die ze hebben is de "ShopBot": een CNC Router/graveur.Ze hebben 3 van hen, een desktop, een medium en groot fo
Met behulp van Fusion Plug mallen maken

Met behulp van Fusion Plug mallen maken

In deze tutorial zal ik Fusion 360 gebruiken maken van een mal plug voor vacuüm vormen van acryl, zodat het eindproduct lijkt op een schildluizen geblazen glas.Gebruikte materialen:1/4 inch acryl, duidelijk en wit3/4 inch MDF, gelijmd met houtlijm vo