Utilizamos cookies propias y de terceros para mejorar nuestros servicios y mostrarle publicidad relacionada con sus preferencias mediante el análisis de sus hábitos de navegación. Si continúa navegando, consideramos que acepta su uso.
Las cookies de este sitio web se usan para personalizar el contenido y los anuncios, ofrecer funciones de redes sociales y analizar el tráfico. Además, compartimos información sobre el uso que haga del sitio web con nuestros partners de redes sociales, publicidad y análisis web, quienes pueden combinarla con otra información que les haya proporcionado o que hayan recopilado a partir del uso que haya hecho de sus servicios. Puede cambiar la configuración u obtener más información aquí

Aceptar

Menú Contráctil

Google

Menús y navegación

Menú Contráctil

Menú que se contrae y expande. Tiene posibilidad de usar targets independientes para cada sección y/o sub-sección.

Se configura su aspecto mediante estilos css definidos normalmente para tener compatibilidad la página con xhtml1.1

Configuración

var anchoMenu = 200 //anchura del menú
var secciones = 5 // cantidad de secciones principales (se crearán tántas secciones como indique este número

Crear un array por cada sección que lleve por nombre Menu_ + un número (correlativos)

var Menu_num = new Array('texto','enlace','target',link o padre(0 es link y + es cantidad de hijos))

Ejemplo:

var Menu_0 = new Array('opcion 1',null,null,2) //opcion de menú principal

Los valores que se quieran omitir hay que ponerlos a null, excepto el último valor.
En el ejemplo, colocaría en el primer botón del menú el texto opcion 1, no contendría link alguno ni target y el número 2 indica que tiene 2 subsecciones que se expanderán al hacer click sobre el botón.

Si el botón no va a tener sub-opciones se pone el último valor a 0

Cada sub-opción de una sección debe llevar por nombre de variable el mismo que su sección padre añadiendo un _número correlativo.

Ejemplo:

var Menu_0_0 = new Array('subOpción 1', 'subop1.htm', 'principal') //subopción del menú

Este submenú pertenecería a la sección definida en la variable Menu_0, mostrará el texto subOpción 1 llevará a la página subop1.htm y la cargará en un frame de nombre principal.

var Menu_0_1 = new Array('subOpción 2','subop2.htm',null)

Lo anterior será la segunda sub-opción de la sección definida en la variable Menu_0, mostrará por texto subOpcion 2 llevará a la página subop2.htm y se cargará en la propia ventana (_self asignando un valor de null)

var Menu_0_2 = new Array('subOpción 3','subop3.htm','Nueva')

Lo anterior será la tercera sub-opción de un Menu_0, mostrará el texto subOpción 3 y cargará la página subop3.htm en una ventana nueva.

Secciones principales:

var Menu_1 = new Array('opcion 2','pepe.htm','Nueva',0)

Lo anterior será la segunda sección del menú principal, mostrará el texto opcion 2, cargará la página pepe.htm en ventana nueva y no tiene subsección alguna (lleva un 0 en la última posición(es enlace directo))

var Menu_2 = new Array('Sección H',null,null,0)

Lo anterior sería el botón del menú principal meramente informativo pero no haría absolutamente nada.

Finalmente el aspecto del menú es definido desde CSS.

ver el código fuente del ejemplo


Buscador de animales en adopción
Creative Commons License
Javascript códigos by tunait is licensed under a Creative Commons Reconocimiento-Compartir bajo la misma licencia 2.5 España License.
Permissions beyond the scope of this license may be available at http://tunait.com/javascript/index.php?s=condiciones.

Todos los códigos incluídos los de la página han sido paridos y tecleados por tunait.com. Política de cookies subir