Paso 3: JavaScript
Ahora pasemos al JavaScript que controlará el mostrar y ocultar nuestros artículos de menú. Queremos que los elementos en el submenú cambiar el clic del ratón, basado en que pestaña de padres se ha hecho clic.En primer lugar, a empezar por escribir una función para ocultar todos los elementos de menú dentro de nuestro contenedor "subNav".
La siguiente función obtiene una lista de todos los elementos UL dentro el ID de subNav, luego recorre la lista y establece propiedad de visualización de cada elemento en 'ninguno'
function hideItems() { var list = document.getElementById("subNav").getElementsByTagName("ul"); for(i=0;i<list.length;i++) { list[i].style.display="none"; }} Bien, ahora vamos a empezar a escribir la función para mostrar los elementos de submenú.
function navMenu() { if (!document.getElementsByTagName){ return; } var anchors = document.getElementsByTagName('a'); La primera línea de nuestra función es un mecanismo de seguridad que simplemente indica al navegador que seguir el enlace si no soporta la función 'getElementsByTagName'.
La segunda línea, similar a la función anterior, obtiene una lista de todos los vínculos y los pone en un array llamado 'anclajes'
for (var i=0; i<anchors.length; i++){ var anchor = anchors[i]; var relAttribute = String(anchor.getAttribute('rel')); Ahora empezamos a recorrer nuestro array 'anclas'. Aquí, coge el valor del atributo 'rel' para cada enlace como llegamos a él.
if (relAttribute.toLowerCase().match('menutrigger')){ anchor.onclick = function() { Ahora comprobamos si ese valor de 'rel' (que almacena como 'relattribute') es igual a 'menutrigger' y por lo tanto, vamos a activar nuestro evento y haga clic.
var nameAttribute = this.getAttribute('name') + "Nav"; var thismenu = document.getElementById(nameAttribute); hideItems(); thismenu.style.display="inline"; return false; } } }} En primer lugar, anexar el texto 'Nav' al final del atributo de nombre de enlace. Ahora nuestro nuevo valor nombreAtributo coincide con el nombre del menú de sub-nav que nos va afectar.
Entonces coge ese sub-menu y asignarlo a la variable 'thismenu'.
Ahora nos escondemos todos nuestros submenús anteriormente mostrados por llamar a la función 'hideItems()' que creamos anteriormente.
Entonces, nos establezca pantalla propiedad del actual sub-menú 'inline' para que sea visible.
Por último, Dile al navegador para que no siga el enlace del menú principal (que acaba) y cerrar todos nuestros soportes abiertos.
