Étape 3: Le JavaScript
Maintenant passons à la JavaScript qui va contrôler l’affichage et le masquage de nos éléments de sous-menu. Nous voulons que les éléments dans notre sous menu pour changer le clic de souris, basé sur quel onglet parent a été cliquée.Tout d’abord, nous vais commencer par écrire une fonction pour masquer tous les éléments de menu dans notre conteneur « subNav ».
Les dessous de fonction obtient une liste de tous les éléments UL l’ID subNav, parcourt cette liste et définit la propriété display de chaque élément sur « aucun »
function hideItems() { var list = document.getElementById("subNav").getElementsByTagName("ul"); for(i=0;i<list.length;i++) { list[i].style.display="none"; }} Bon, maintenant nous allons commencer à écrire la fonction pour afficher les éléments de sous-menu.
function navMenu() { if (!document.getElementsByTagName){ return; } var anchors = document.getElementsByTagName('a'); La première ligne de notre fonction est une sécurité intégrée qui indique simplement le navigateur de suivre le lien si il ne supporte pas la fonction « getElementsByTagName ».
La deuxième ligne, similaire à la fonction ci-dessus, obtient une liste de tous les liens et les met dans un tableau appelé « ancres »
for (var i=0; i<anchors.length; i++){ var anchor = anchors[i]; var relAttribute = String(anchor.getAttribute('rel')); Maintenant, nous commençons à boucle dans notre tableau « ancres ». Ici, nous prenez la valeur de l’attribut « rel » pour chacun des liens que nous arrivons à elle.
if (relAttribute.toLowerCase().match('menutrigger')){ anchor.onclick = function() { Maintenant, nous vérifions pour voir si cette valeur « rel » (dont nous avons stocké comme « relattribute ») est égale à « menutrigger » et que donc, nous allons déclencher notre événement sur clic.
var nameAttribute = this.getAttribute('name') + "Nav"; var thismenu = document.getElementById(nameAttribute); hideItems(); thismenu.style.display="inline"; return false; } } }} Tout d’abord, nous ajoutons le texte « Vin » à la fin de l’attribut name de la liaison. Maintenant notre nouvelle valeur nameAttribute correspond au nom de la sub-nav menu que nous allons affecter !
Ainsi donc, nous saisir ce sous-menu et assignez-la à la variable 'thismenu'.
Maintenant nous Masquer toutes nos sous-menus précédemment affichées en appelant la fonction 'hideItems()', que nous avons créé précédemment.
Ensuite, nous avons mis l’actuel sub-propriété du menu affichage « inline » pour le rendre visible.
Enfin, dire le navigateur ne pas à suivre le lien du menu principal (qui nous a juste cliqués) et fermez l’intégralité de nos supports ouverts.
