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ú desplegable vertical

Google

English version

Menús y navegación

Menú desplegable vertical

Menú desplegable multinivel vertical. Tiene posibilidad de usar target _blank para cada sección y/o sub-sección de forma independiente

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

En dispositivos sin soporte para CSS el menú se carga como una lista de links.

Configuración

var anMenu = 130 //anchura del menú
var totalMen = 6 // cantidad total de secciones principales (se crearán tántas secciones como indique este número)
var imaflecha = 'url(flechitaazul.gif)' // ruta de la imagen de la flecha que indica si tiene sub-opciones. Si no se quieren usar imágenes dejarlo como 'url()'

Crear una instancia del objeto tunMen por cada sección que lleve por nombre Op_ + un número (correlativos)

var Op_num = new tunMen('texto','enlace','target',numero de subopciones, anchura del sub-menú a mostrar)

Ejemplo:

Op_0 = new tunMen('Animalitos',null,null,4,150)

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 Animalitos, no contendría link alguno ni target y el número 4 indica que tiene 4 subsecciones que se expanderán al hacer pasar el mouse sobre el botón.

Si el botón no va a tener sub-opciones se pone el penú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:

Op_0_0 = new tunMen('gatos','gatos.htm','principal',1,100)//subopción del menú

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

Op_0_1 = new tunMen('cánidos','canidos.htm',null,0,100)

Lo anterior será la segunda sub-opción de la sección definida en la variable Op_0, mostrará por texto cánidos llevará a la página canidos.htm y se cargará en la propia ventana (_self asignando un valor de null) y no desplegará ningún sub-menú

Secciones principales:

Op_2 = new tunMen('Pececillos','peces.htm','_blank',0,100)

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))

Op_5 = new tunMen('otros...',null,null,0,100)

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

Crear en el cuerpo del documento (body) un contenedor que lleve por id me

<div id="me"></div>

Finalmente el aspecto del menú es definido desde CSS.

ver el código fuente del ejemplo

Recomendación para accesabilidad

Si la página web es cargada en un dispositivo sin javascript el menú no se cargará con lo que quederá sin menú y, por lo tanto, sin el medio para acceder a las distintas secciones. Recomiendo incluir un menú alternativo que se visualice en el caso de que el navegador carezca o no tenga activado el intérprete de javascript.

Crea una lista de enlaces (links) con la misma estructura que le dés al menú desplegable e inclúyela entre los tags de <noscript> y </noscript>

<noscript>
 <ul>
  <li>Item</li>
  <li>Item 
    <ul>
      <li>Item</li>
      <li>Item 
        <ul>
          <li>Item</li>
        </ul>
      </li>
      <li>Item</li>
    </ul>
  </li>
  <li>Item</li>
 </ul>
</noscript>

De esta forma se cargará una lista de links alternativos para poder navegar por el sitio.



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