Blog: Diseño web

5 razones para hacer tu menú desplegable con listas y css

Publicado el: 24/05/2007 en: Diseño web | 3 comentarios

A la hora de abordar un diseño, es importante tener en cuenta ciertos factores como la accesibilidad, la facilidad de actualización, la rapidez de carga y la compatibilidad. En esta entrada vamos a tratar las ventajas de desarrollar un menú desplegable con listas y css.

#1 Más accesible. Las listas jerarquizan el contenido del menú, de modo que los navegadores no visuales encuentran los enlaces dispuestos de manera ordenada.

Un ejemplo. En la página web del Instituto Nacional de Estadística (INE), se ha elegido un mapa de imágenes para desarrollar el menú desplegable de la izquierda. Una excesiva dependencia de la información gráfica excluye a los usuarios invidentes o con deficiencias visuales.

Además, el hecho es que los enlaces que componen un menú forman una lista. Etiquetarlos como tal es lo apropiado, y tiene un significado más profundo que si simplemente los agrupamos uno tras otro. La semántica es, y seguirá siendo, muy importante.

#2 Más manejable. Al diseñar el menú con css, quedan separados estilo, estructura y comportamiento. Esto aportará más limpieza al código y será más sencillo de entender para otros si más adelante es otra persona distinta del desarrollador/diseñador quien se encarga de la página.

#3 Más rápido. Un mapa de imágenes como el del INE necesita proporcionar al navegador gran cantidad de información para que posicione los elementos desplegables. Lo mismo ocurre con los menús que se hacen con tablas para cada item y javascript para los efectos de despliegue.

En cambio, los menús con listas estiladas como el del Ministerio de Industria, Turismo y Comercio (MITYC), definen un estilo general que después se aplica particularmente a cada elemento, lo que agiliza la carga de la página.

#4 Más versátil. Otra ventaja añadida es que se puede modificar su apariencia de forma radical con sólo pequeñas modificaciones en los estilos CSS.

Así, un menú vertical puede convertirse fácilmente en un menú horizontal, y viceversa. Lo mismo ocurre con modificaciones de colores o a la hora de agregar un nuevo elemento al menú.

#5 Más compatible. Existen organismos como el W3C, creado por el padre de la WWW, que marcan pautas o estándares para que las páginas web estén escritas de la misma manera. Aunque hay navegadores que todavía no se han adaptado por completo a estas pautas, la tendencia pasa por ceñirse cada vez más a ellas.

Diseñar con listas estiladas es más adecuado a los estándares. Los estándares son iguales para todos, por lo que aunque no hayamos probado nuestra web en todos los navegadores y plataformas, si éstos se rigen por los estándares vigentes, la mostrarán de forma correcta.

Anotaciones relacionadas | Menús CSS gratis