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 accesible

Google

English version

Menús y navegación

Menú desplegable accesible

Publicado el 05 de Octubre del 2006

Se han publicado en la red unos cuántos artículos comentando algunos inconvenientes de los menús desplegables. En esta ocasión se me ocurrió crear un menú desplegable (otro) tratando de corregir los inconvenientes que en estos artículos se comentan.

Se trata de crear un menú mediante una lista no ordenada (ul) de links y con un id Menu. Supongamos que tenemos un listado de artículos y tutoriales para algunos lenguajes:

Los elementos de lista que definan a una lista anidada los marcamos con negrita o cualquier otro tag de marcado que prefiramos. En el ejemplo vamos a usar el tag b para negritas.

Tal y como está nuestro menú de links se podrá visualizar en cualquier dispositivo, independientemente de si soporta o no CSS y/o Javascript.

Hoja de estilos para menú sin js

Lo siguiente que haremos será crear una hoja de estilos para cuando el menú se cargue en un dispositivo con soporte para CSS pero sin soporte Javascript o algún navegador con Javascript desactivado. A esta hoja de estilos le damos por nombre de archivo estilosmenusinjs.css y la vinculamos al documento que contiene el menú de links asignándole un atributo title con el mismo valor que al nombre de archivo.

<link type="text/css" title="estilosMenusinjs" rel="stylesheet" href="estilosmenusinjs.cs" />

Hoja de estilos para menú con js

Finalmente creamos una segunda hoja de estilos para el menú en su modo desplegable con Javascript. Esta hoja de estilos será vinculada al documento directamente con Javascript, de forma que sólo será cargada si el dispositivo que carga la página soporta Javascript y además lo tiene activado. El nombre de archivo que le daremos a esta hoja de estilos será estilosmenujs.css.

El Javascript del menú se encarga de alterar lo necesario para convertir la lista de links en un menú desplegable. Substituye los elementos marcados en negritas por links para poder navegarlos mediante el teclado en caso necesario.
El menú evita usar eventos de ratón. Se abren las opciones mediante un enter (intro) cuando el foco está sobre ese elemento y se cierran de igual forma. Usando el ratón (mouse) se abre y cierra con click. Igual cuando el ratón sale del menú éste se cierra al cabo de unos segundos (esto no sucede cuando se usa el menú con el teclado).



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