Menu JavaScript

>> //seccion/javascript/ -- 2 comentario /// Agregado el 2005-07-26 @ Por SparoHawk

Aquí les traigo un script para crear menus sencillos de mucha utilidad, puesto que bien utilizado le puedes ahorrar a un usuarios el tener que navegar de link en link para accesar los contenidos.

Aquí les traigo un script para crear menus sencillos de mucha utilidad, puesto que bien utilizado le puedes ahorrar a un usuarios el tener que navegar de link en link para accesar los contenidos.

Para este tuto les daré el JavaScript y luego un código HTML que usaremos de ejemplo. De ahí, les eplicaré cómo trabaja todo.

JavaScript Code:

                 
d = document;
  
  function menujs(ids) {
    var cont = "menujs";
    var cont_tag = "div";
    var x = d.getElementById(cont).getElementsByTagName(cont_tag).length;
    var idstring = "";
  
    for (k = 0; k < x; k++) {
      idstring += d.getElementById('menujs').getElementsByTagName(cont_tag)[k].id + ";";
    }
  
    if (d.getElementById(ids).style.display == "none") {
      d.getElementById(ids).style.display = "block";
    } else {
      d.getElementById(ids).style.display = "none";
    }
  
    for (j = 0; j < x; j++) {
      var idtxt = idstring.split(';')[j];
      if (idtxt != ids) {
        if (d.getElementById(idtxt).style.display == "block") {
          d.getElementById(idtxt).style.display = "none";
        }
      }
    }
  }

El Código HTML

El código HTML es algo extenso, asi que para no abarrotar todo el espacio pondré un link a un archivo con el código, y de paso un ejemplo funcional:

código HTML

» Ejemplo del Menú «

¿Cómo Funciona?

Bien, lo primero que quiero hacer notar es lo siguiente. Para que este script funcione se tienen que cumplir dos reglas. La primera es, que los elementos del menú deben estar contenido en un elemento de HTML que no deben de repetir. Utilizaré el; ejemplo dado para ilustrar mi punto:

Si se fijan, el menu esta todo dentro de el elemento ul que posee el id menujs. El otro punto en el que deben fijarse es que, los nombres de la serie de anime (Naruto, Bleach y Saint Seiya) están cada uno contenido en un elemento div, y cada elemento posee un id. Esos son los elementos que no se pueden repetir, salvo para agregar el titulo de otra serie de anime. ¿Por qué? Pues porque estos son los que controlan cuando se ve o no las secciones de cada serie. Yo utilize div, pero se puede usar cualquier elemento siempre y cuando se apegue a la regla antes mencionada.

Ahora, yendo al JavaScript, hay dos variables, cont y cont_tag. La variable cont contiene el valor del id del elemento contenedor, es decir ul en el ejemplo (puedes utilizar cualquier elemento, pero te tienes que asegurar que el id del elemento y la variable cont en el script sean el mismo valor). La variable cont_tag es el nombre del elemento que no deben de repetir, o sea, los elementos que contienen los nombres de las series de anime. Espero que todo haya quedado claro. Una vez cumplidos esos dos requisitos ya tendrás tu script funcionando a un 100%.

Si tienen cualquier duda o problema dejen un mensaje aca o contactenme por el foro o por email. Con gusto los ayudare.

MC | #permalink 2 comentario