Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Logo

Aprende Web

Crea y diseña tus sitios en la Web.

Prácticas Javascript

Ejercicios de prácticas para crear elementos interactivos con javascript


Y ahora tambien aprende a programar en C++ con Aprende Web C++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net





logo 

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




Menus Desplegables

Navegador desplegable II

Planteamiento del ejercicio

En la página anterior (Navegador desplegable I) hemos hecho un menú desplegable en el que la mayoría del código lo realizamos en HTML. La ventaja está en que es una forma muy simple de hacer un menú desplegable. Sin embargo como inconveniente tenemos que si tenemos un sitio con varias páginas en las que aparece la misma barra de navegación, al modificar cualquier submenú tenemos que modificarla en todas y cada una de ellas.

Si colocamos los submenús en una página aparte con el código javascript, al modificar los sumenús los estaremos modificando en todas las páginas que enlacen con la página de código, de esta manera no tenemos que ir cambiando todas las páginas una a una.

En este ejercicio construiremos los mismos menús desplegables que en la página anterior, pero sin modificar la página HTML inicial, ya que éstos estarán incluidos en el código javascript.


Página HTML inicial

Partimos de la misma página inicial que en el ejercicio anterior, la cual puedes verla en el siguiente enlace:

Página inicial


El código de esta página es igual que el del ejercicio anterior con la diferencia de que le hemos puesto en la cabecera un link o enlace a la página donde escribiremos el código javascript. Puedes ver el código de la página en el siguiente enlace:

Otra diferencia está en los atributos "id" de las secciones,(elementos de la lista) estas empezan por el número 0, de esta manera las podremos asociar a un array.

Código de página inicial


A partir de aquí en el archivo javascript incluiremos todo lo necesario para crear los menús desplegables.


Datos de los menús desplegables

Lo primero que haremos sera crear el archivo "submenús.js" en el que incluiremos todo el código javascript para este ejercicio. Una vez creado el archivo incluiremos en él los datos que necesitamos para los menús desplegables, es decir para cada enlace escribiremos el texto que aparecerá en pantalla y la ruta del mismo. Esto lo haremos incluyéndolos dentro de una serie de arrays.

Una vez creado este archivo incluiremos en él por medio de arrays los submenús. para ello creamos dos arrays principales, el array titulos y el array enlaces. Cada elemento de estos arrays consistira en otros arrays en donde guardaremos los textos y las rutas de enlace de los submenús. Veamoslo en el archivo javascript:

//BARRA DE NAVEGACIÓN: enlaces y datos.
//gardar los datos en arrays:
var titulos=new Array();
var enlaces=new Array();
//Datos de los submenús
titulos[0]=new Array(
          "Subsección uno uno",
          "Subsección uno dos",
          "Subsección uno tres",
          "Subsección uno cuatro");
enlaces[0]=new Array("#","#","#","#");
titulos[1]=new Array(
          "Subsección dos uno",
          "Subsección dos dos",
          "Subsección dos tres",
          "Subsección dos cuatro",
          "Subsección dos cinco");
enlaces[1]=new Array("#","#","#","#","#");
titulos[2]=new Array(
          "Subsección tres uno",
          "Subsección tres dos",
          "Subsección tres tres",
          "Subsección tres cuatro",
          "Subsección tres cinco");
enlaces[2]=new Array("#","#","#","#","#");	
titulos[3]=new Array(
          "Subsección cuatro uno",
          "Subsección cuatro dos",
          "Subsección cuatro tres");
enlaces[3]=new Array("#","#","#");	

Cada elemento de los arrays principales guarda en un array los datos de un submenú. Los elementos de los arrays de enlaces están sin poner, por eso están marcados todos con "#"; En una página real pondremos ahí las rutas de los enlaces.


Crear los submenús

Una vez que tenemos todos los datos los insertaremos en la página. Para ello crearemos dos nuevos arrays, En el primero guardaremos los elementos de la lista, y en el segundo los nuevos "divs" que crearemos para guardar los submenús.

Ampliamos el código javascript con las siguientes líneas:

//arrays para guardar elementos de la lista y submenús:
var menu=new Array()
var submenu=new Array()

En cada elemento del array menu guardaremos un elemento de la lista tras buscarlo en el DOM. Después lo modificaremos añadiendole un "div" con un "id" de subsección.

Buscaremos en el DOM estos nuevos elementos de subsección, para añadirles los enlaces (texto y ruta) guardados en los arrays del principio.

Veamos el código javascript con el que creamos los nuevos elementos:

window.onload = function() {
//BARRA DE NAVEGACIÓN: Crear desplegables:
for (i=0;i<titulos.length;i++) {
     //localizar elementos principales
     menu[i]=document.getElementById("seccion"+i);
     //crear elemento menu desplegable
     menu[i].innerHTML+="<div id='subseccion"+i+"'></div>"
     //localizar elemento menu desplegable
     submenu[i]=document.getElementById('subseccion'+i);
     //escribir menu desplegable
     for (j=0;j<titulos[i].length;j++) {
         submenu[i].innerHTML += "<p><a href='"+enlaces[i][j]+"'>"+titulos[i][j]+"</a></p>";
         }
     }
}

Aunque el código viene ya comentado vamos a explicar lo que hemos hecho:

El resultado es que a cada elemento del navegador se le ha añadido el submenú correspondiente. La página queda ahora como en el siguiente enlace:

Desplegable II - Fase 1.



Estilo de las listas

La forma en que vemos la página no es precisamente como queremos que quede, pero sin embargo cada submenú se ha asociado a su elemento de la lista. Ahora mediante el estilo CSS cambiaremos el aspecto de los submenús, y esto lo haremos desde javascript.

Para ello, dentro del bucle for donde hemos creado los submenús añadimos las propiedades de estilo a los elementos del DOM (código nuevo en color siena):

window.onload = function() {
//BARRA DE NAVEGACIÓN: Crear desplegables:
for (i=0;i<titulos.length;i++) {
     //localizar elementos principales
     menu[i]=document.getElementById("seccion"+i);
     ........
     ........
     for (j=0;j<titulos[i].length;j++) {
         .........
         }
		 //estilo de los submenús
     menu[i].style.position="relative";
     submenu[i].style.position="absolute";
     submenu[i].style.top="100%";
     submenu[i].style.left="0px";
     submenu[i].style.backgroundColor="#41338b";
     submenu[i].style.font="normal 0.8em arial";
     submenu[i].style.padding="0.2em 0.5em";
     }	 
}

Las propiedades CSS que hemos añadido son básicamente las mismas que en el ejemplo de la página anterior, es decir, la posición relativa para el elemento padre, y la posición absoluta para el submenú. Posicionamos luego el submenú debajo del elemento padre, y le damos formato (color de fondo, tipo de letra y márgenes).

Ahora la página en el navegador la veremos como en el siguiente enlace:

Desplegable II - Fase 2.


Tenemos ya los submenús para cada elemento de la barra de navegación. Ya sólo nos queda ocultarlos y mostrarlos al pasar por encima.


Ocultar y mostrar submenús

En primer lugar, lo que debemos hacer es ocultar los submenús al cargar la página, para ello en el código de las propiedades CSS anterior, añadiremos una nueva propiedad:

     //estilo de los submenús
     menu[i].style.position="relative";
     ........
     submenu[i].style.padding="0.2em 0.5em";
     submenu[i].style.display="none"		 

La propiedad display: none oculta los submenus, sin embargo estos podemos hacerlos visibles mediante la aplicación de eventos a los elementos de la lista de navegación.

Aplicaremos ahora los eventos onmouseover para visualizar el submenu y onmouseout para ocultarlo. De esta manera al pasar el ratón por encima se abre el submenu, y al salir de encima, este se oculta. Vamos a aplicar estos eventos desde el mismo código javascript. Para ello dentro de la función anónima windows.onload = function(), pero ya fuera de cualquier bucle, creamos un nuevo bucle para aplicar los eventos, los cuales nos remitirán a dos nuevas funciones:

//eventos para ver - ocultar menu
for (i=0;i<titulos.length;i++) {
    menu[i].onmouseover = ver;
    menu[i].onmouseout = ocultar;
    } 

Ahora, fuera ya de la función anónima de window.onload creamos las funciones ver() y ocultar() que hacen que los menús se muestren u oculten al pasar o no el ratón por encima.

//función para ver los menús desplegables.
function ver() {
         muestra=this.getElementsByTagName("div")[0];
         muestra.style.display="block"
         }
//funcion para ocultar los menús desplegables.
function ocultar() {
         oculta=this.getElementsByTagName("div")[0];
         oculta.style.display="none"
         }

Observa cómo para localizar el elemento hijo, es decir el submenú utilizamos la palabra reservada this seguido de getElementsByTagName("div")[0]; de esta manera nos aseguramos de que en cada elemento modificamos su propio submenú.

el ejercicio ya esta completo, y el resultado puedes verlo en el siguiente enlace:

Desplegable II - finalizado.


A continuación te damos el código completo de la página tanto del archivo en HTML como del archivo javascript. Los puedes ver en el siguiente enlace:

Código de desplegable II






Acabamos aquí la sección de menús desplegables. si quieres seguir con algún otro ejercicio vuelve a la página de introducción y elige otro.

Volver a introducción.



menu desplegable: prácticas js.

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com