Ya hemos visto como crear un menú horizontal y otro vertical paso a paso. En esta entrada explicaremos a crear un menú horizontal con varios niveles y subniveles, mediante una estructura de listas estilizadas por CSS.

Mediante ul > li:hover ul podremos definir los submenús. Cuando creamos los menús normales, aplicamos display: block y le damos estilos, por ejemplo, un color de fondo (background: white;). La diferencia con los submenús es, que aplicamos los estilos a los elementos hijos (ul > li:hover).

Código HTML

Código CSS

Ejemplo de su funcionamiento

Conclusión
Este es un modo de crear menús con varios subniveles, sin necesidad de usar Javascript, a menos que deseemos darle efectos de animación. Una de las contras que tiene, es, que, para variar, no funciona en IE6.

Hoy les vamos a enseñar cómo crear un sorprendente menú de navegación con solapas desplegables para sus sitios web, mediante CSS y jQuery.

La navegación estará casi totalmente oculta, los ítems sólo se deslizarán hacia afuera cuando el usuario pase el mouse sobre el área cercano a ellos, algo similar a un índice telefónico, valiéndonos del efecto slide() de jQuery.

Antes de comenzar, aquí tienen una demo del efecto para que tengan una idea de cómo va a quedar

La estructura HTML
Lo único que necesitaremos para la navegación es una simple lista no ordenada con links dentro de cada ítem.

La lista obtiene una ID porque debemos hacer referencia a ella luego en el JavaScript. Con jQuery, haremos que los links se deslicen fuera cuando pasemos el mouse sobre los elementos li de la lista.

El CSS
Primero, definimos las propiedades CSS para los elementos de la lista:

La navegación siempre debería ser accesible para el usuario, incluso aunque haga scroll down de la página. Por lo que la posición debería ser fija. El margin y padding están seteados en 0, debido a que la lista desordenada tiene valores por defecto para ellos. La navegación debería estar en la parte superior de todos los otros elementos de la página. Es por eso que hemos seteado el z-index muy alto.

Ahora veamos las propiedades de los elementos de la lista:

Para los links de los elementos de la lista, definimos las siguientes propiedades CSS:

El margen izquierdo está programado en un valor negativo para esconder la mayor parte del icono y sólo revelarla cuando pasamos el mouse sobre la lista de ítems. Básicamente, estamos empujando el elemento link a la izquierda, fuera del área visible de la página.

En el Javascript definiremos una función que hace que los elementos se desplacen hacia afuera. Pero primero vamos a añadir esquinas redondeadas a ellos (a pesar de que esto no funcione en Internet Explorer):

Para que luzcan bien, añadiremos opacidad, y así el contenido de abajo será visible:

La última propiedad filtro hará que esto funcione para Internet Explorer también.

Estas fueron las propiedades comunes de todos los elementos de la lista. Ahora, definimos el fondo de la imagen para los links en la lista de ítems específica:

Y eso es toda la parte del CSS.

El Javascript
Usando jQuery, haremos que los iconos aparezcan siempre que pasemos el mouse sobre uno de los elementos de la lista. Recuerden, la lista de items posee un ancho de 100 píxeles, sólo el elemento link está siendo empujado fuera de la página hacia la izquierda, por lo que no es visible.

Definimos la siguiente función (antes de que finalice la etiqueta body) que se ejecuta siempre que pasamos el mouse sobre un li:

Por lo que, al hacer hover, deseamos especificar que el elemento link tenga un margen izquierdo de -2 píxeles, y que eso sea animado de forma bonita y no demasiado lento (200 milisegundos). Mover el mouse fuera debería poner el elemento link nuevamente en su posición anterior (-85 píxeles). La función stop() detiene todas las animaciones que estén andando sobre los elementos especificados, lo que brinda el bonito efecto cuando, por ejemplo, se pasa con el mouse sobre todos los elementos muy rápido.

Lo que sería realmente genial, es hacer al usuario consciente de que existe una navegación tan sorprendente en la página. Por lo que sería bueno mostrar brevemente la navegación cuando la página carga. Así que dejaremos que inicialmente la navegación sea visible. Para eso cambiamos el margen izquierdo de los elementos link:

Y añadimos la siguiente línea al comienzo de la función JavaScript:

Con esa línea definimos que debería tomar 1 segundo darle un margen izquierdo de -85 píxeles a todos los elementos link de la lista. A través del margen que programamos mostraremos la navegación al usuario y con el JavaScript luego la ocultaremos.

¡Y listo!

Si eres fanático de las sombras, también puedes añadir estas líneas en el CSS de los elementos link:

Añadiendo la caja de sombra y removiendo la opacidad, les dará a los ítems de la navegación un aspecto 3D. Dejar la opacidad, los hará ver genial también, prueben y disfruten.

En este post nos hemos enfocado en el estudio del CSS para dar consejos que nos permitan lograr, paso a paso, el buen uso de este lenguaje y administrar el diseño de nuestras páginas web, logrando manipular el espacio a nuestro favor y jugando con la amplia gama de posibilidades que nos ofrece, en este artículo hablaremos de la influencia del estilo en la navegación y accesibilidad de nuestro sitio de Internet.

Para seguir esta guía, conviene leer antes el capítulo sistema de navegación de una página web.

Hemos visto, mencionado y resaltado en nuestros artículos anteriores, como el diseño de nuestros sitios web puede marcar la diferencia entre atraer o no a los internautas que llegan por primera vez a nuestro portal. Esa primera impresión es capaz de crearnos un grupo de seguidores que en un futuro se puede convertir en un buen mercado, lo que influirá para atraer inversionistas y empresas que deseen publicitarse con nosotros, o bien, por el otro lado nos hará ir perdiendo clientes potenciales que es exactamente lo contrario a lo que buscan estos anunciantes.

Incluso, muchas veces no queremos crear un sitio web que venda espacios, quizás nosotros sólo deseamos dar a conocer nuestra idea o producto en la web sin necesidad de ofrecer nuestro servicio de publicidad y cobrar por ello, sin embargo en estos casos un mal diseño también puede influir para hacer que esta idea o este producto llegue a quedar con una mala imagen si no lo exponemos adecuadamente y con las herramientas apropiadas.

Para lograr llegar a esa diferencia positiva hay que tener siempre en cuenta dos factores muy importantes, la accesibilidad y la navegación a través de nuestro sitio, en las cuales influirá el estilo y el diseño.

La navegación web es una de los principales elementos que podemos mejorar y adecuar con las hojas de estilo, esto se ve reflejado en el constante uso de menús y barras para guiar al usuario en las páginas de Internet.

El uso de menús permite al usuario de nuestro sistema o al navegante de nuestro sitio, desplazarse a través del árbol conformado por todos los elementos web, páginas de contacto, de información, de productos, de compras, de dudas, búsquedas, etcétera. Es importante darle acceso a todas y cada una de estas secciones para que toda los datos que el requiera estén a su alcance de manera rápida y sencilla.

Existen miles de sitios minimalistas en la red donde todo se logra exponer en una o dos páginas, esto en principio suena muy bien y si tenemos la oportunidad de hacerlo es una buena práctica, sin embargo muchas veces esto no se puede adecuar a nuestro sitio quizás por disposición del mismo cliente o por necesidad de presentar más información y/o productos, tenemos que ver el enfoque de nuestro sitio como algo relevante para guiar la navegación; ya que, no es lo mismo guiar a un usuario a través de un sitio de compras a guiarlo en una página personal o blog.

Por ello, debemos de realizar un esfuerzo a la hora de diseñar un menú y no simplemente tomarlo como un paso más, debemos planearlo y codificarlo de tal manera de que el producto sea efectivo y sobre todo útil para los internautas. La creación de menús de navegación con CSS es un tema creativo, con muchas formas de explotarse y que nos permitirá desplegar nuestras ideas para que los usuarios se sientan cómodos en nuestra página.

Pasos para hacer un menú web eficaz

Existen cientos de galerías y códigos en Internet para obtener menús desplegables, horizontales, verticales, transparentes, con hijos, sin hijos, etc., es cuestión de buscar y con la ayuda de Google tendremos en la “palma” de nuestra computadora un sinfín de menús que lucirían fantásticos en nuestros sitios, esto no es ninguna novedad, pero que pasa si deseamos ir más allá y queremos empezar a diseñar nuestros propios menús y nosotros mismos manipular cada aspecto y saber el para qué y cómo de las cosas, para ello hay que empezar con la estructura la cual se irá formando tomando en cuenta varios puntos.

Elegir el lenguaje web para el menú
En primer lugar debemos definir con que lenguaje haremos nuestro menú, como ya mencionamos en nuestro caso usaremos únicamente CSS por ser el lenguaje en el que nos estamos adentrando actualmente y debido a su sencillez y fácil ejecución. Se puede optar por crear menús en otros lenguajes o mezclar estos con el propio CSS, como es el caso de Javascript, el cual se ha convertido en la mejor opción para hacer menús dinámicos ligeros que muestren los “hijos” o sub-secciones de las páginas principales, para ello el uso de librerías como jQuery o mootools nos puede ahorrar unas cuantas horas de trabajo.

Otra opción puede ser usar la herramienta Flash, de Adobe, pero ya dependerá del enfoque que le queremos dar, como mencione anteriormente todo varía según la navegación que corresponde al tipo de nuestro sitio.

Estructura básica del menú de navegación
La estructura básica en XHTML para nuestro menú será la siguiente:

Estos son los cimientos sobre los cuales construiremos el resto del proyecto, como podemos ver se trata simplemente de una lista desordenada (unordered list) que contendrá el número de “ítems” o secciones que queremos mostrar en el menú los cuales están resguardados dentro de las etiquetas “<li>”. Sin agregar un estilo, esto se vería nada más como una lista con viñetas de punto en nuestro navegador, pero ahí es donde empieza a hacer su trabajo el CSS.

Añadiendo estilos CSS
Debemos declarar la propiedad “inline-block” para los ítem del id #menu en nuestro CSS, así todo el texto dentro de las etiquetas “<li>” se acomodaran dentro de una sola línea sin que exista saltos entre ellos; es decir, al momento de definir esta propiedad en el navegador veremos una lista pero ahora de manera horizontal y sin decoración, aunque esto puede variar si nosotros se la agregamos. Para lograr esto basta con agregar las siguientes líneas en nuestro código:

Al momento de definir la propiedad “inline-block” también podemos agregar otras como padding para separar cada elemento por cierta distancia dada en pixeles, si yo indico algo como “padding-left: 15px;” existirá un espacio de 15 píxeles a la izquierda de cada elemento de la lista. Con “inline-block” podemos agregar width y height para definir el tamaño del elemento, es por ello que en este caso lo usamos en vez de “inline”, que aunque a simple vista parecen la misma propiedad, al usar “inline” no se puede dar ancho ni altura a los elementos de la lista.

También podemos irle dando estilo a nuestro menú agregando atributos como fuentes y colores.

Con el código anterior las letras de nuestro menú ahora se mostrarán con una Font (fuente) llamada Helvética, muy utilizada por los diseñadores, en color gris bajo y un tamaño de 18 píxeles. De igual manera podemos hacer que la lista se muestre exactamente en el inicio del div menú, esto lo podemos lograr quitando de la siguiente manera, los márgenes y padding que se agregan por default.

Con ello tenemos definida la estructura del menú, este div lo podemos incrustar dentro de otro div “contenedor” y así centrarlo o colocarlo en el lugar donde queremos que luzca. Para poder realizar una menú vertical básicamente se hace lo mismo sólo que obviamente la propiedad “inline-block” se omite.

A partir de ahí podemos usar nuestra creatividad para darle el estilo que deseemos a nuestro menú podemos manejar fondos, sombras, eventos y demás, en los siguientes artículos daremos ideas para decorar y hacer más presentables nuestros menús.

¿Necesitas una barra de navegación para tu sitio web? Este tutorial explica como diseñar una bonita barra de navegación mediante el uso de CSS, inspirada en Gettyimages. Es tan simple como otras que he descrito anteriormente.

Código HTML
El código HTML es muy simple, consta de una estructura con listas <ul> con un elemento <li> para cada enlace de la barra de navegación:

Cada enlace <a> contiene una etiqueta <span> dentro del mismo. Esto es usado muy a menudo para diseñar elementos líquidos con bordes redondeados.

Código CSS
A continuación se muestra el código CSS para estilizar la lista que compone la barra. Las imágenes se mostrarán después, donde podremos descargar todo el ejemplo. Podemos diferenciar varias imágenes: 2 en la parte superior (izquierda y derecha) 2 en la parte inferior (izquierda y derecha), imágenes que componen el conjunto :hover (al posicionar el ratón encima del enlace), y otras 4 imágenes para la zona en la que nos encontremos, con la misma disposición.

Estandarización
XHTML 1.0 Transitional inválido.
CSS 2.1 válido.

Los menús son una parte fundamental de nuestro proyecto ya que facilitan la navegación al usuario. Debemos crearlos lo mejor posible, y si puede ser, con algún efecto, como el menú animado que os mostré en el post anterior. En esta entrada aprenderemos a crear un menú muy bonito utilizando JQuery y CSS:

Código HTML
Primero crearemos una lista desordenada. Simplemente ve creando listas y agrupándolas en niveles para crear los submenús:

Código CSS
Es tiempo para estilizar nuestra lista. En los comentarios del código podréis ver para qué sirven las propiedades que estamos insertando:

Código Javascript
Usaremos Javascript con la librería JQuery para animar nuestro menú. En los comentarios del código explico para qué sirve cada propiedad. Si eres nuevo en JQuery puedes aprender más en su página oficial.

Solo mostraremos las flechas si el usuario tiene Javascript activado. Si no lo tiene, no lo mostraremos.

Es decir, con Javascript activado quedaría así:

Sin Javascript activado:

Estandarización
CSS 2.1 inválido (por propiedades únicamente para CSS3).
XHTML 1.0 Transitional inválido (las etiquetas <span></span> no son válidas).

Ejemplo de su funcionamiento

Hace tiempo fue publicado un artículo que probó ser una forma popular de implementar menúes desplegables livianos y accesibles basados en CSS que se acomodan en IE.

Ahora les enseñaremos cómo implementar menúes dropdowns más livianos.

Dropdowns de un solo nivel
El HTML lucirá algo así:

Para configurar las cosas necesitamos un estilado básico:

Noten que necesitamos especificar el ancho en el selector #nav la o bien Opera comenzará a tambalearse. Asimismo, recuerden que debido a que flotan las cosas, el contenido por debajo de los menús desplegables también tiene que ser limpiado (clear:left).

Evidentemente, debemos ocultar las listas que queremos “desplegar”, pero para hacer las cosas lo más accesible posible debemos evitar el uso de display: none, que, esconde elementos de algunos lectores de pantalla.

Las especificaciones CSS dicen que los valores superior, derecho, inferior e izquierda deben compensar un cuadro de posición absoluta del cuadro contenedor. Pero, por desgracia Opera decide compensar las cajas con posición absoluta en relación con la página y es por eso que el combo original Suckerfish no funciona en Opera( porque se basó en las propiedades de arriba y de izquierda con una longitud explícita).

Por lo que en lugar de mostrar display: none utilizamos left: -999em para quitar la lista desplegable de vista y luego left: apto (en lugar de left: 0) para volverla a traer.

Y esto sorteará todos los obstáculos para esos navegadores que no soportan realmente la clase :hover, pero para IE debemos configurar el Suckerfish Javascript suelto:

Básicamente, esto aplica la clase 'sfhover' a los elementos li en el elemento 'nav' cuando se pasa el mouse por encima y lo quita, utilizando una expresión regular, cuando el mouse se quita.

Así que ahora tenemos la Suckerfish bombeando nuevas clases, el siguiente paso es simplemente duplicar el selector :hover con selectores de la clase 'sfhover':

Y ahí tienen a su menú desplegable de un sólo nivel (estándar).

Dropdowns de multi-niveles
El artículo original de Suckerfish cubre simplemente menúes desplegables de un sólo nivel, pero con un poco de extensión de la lógica de cascada, es posible crear menúes desplegables de varios niveles con CSS también. Y a diferencia del código original Suckerfish JavaScript, la función 'sfhover' ahora aplicará el comportamiento a todos los elementos li descendientes de 'nav' en lugar de sólo a los hijos directos de modo que ahora los menúes desplegables de varios niveles son posibles en Internet Explorer también.

Así que, para empezar, digamos que estamos tratando con una estructura de lista con más niveles como esta:

Hay un par de cosas que necesitamos agregar al método de un solo nivel. Primero, la lista de tercer nivel necesita desplegarse del lado del ítem de la lista correspondiente, por lo que es necesario añadir esta simple regla, que se aplicará a todos los despliegues después del primero:

Debido a que no se puede especificar explícitamente la parte superior de las cajas con posición absoluta, se ubicarán debajo de la línea de los ítem de la lista seleccionada, que es la causa por lo que el margen superior del nivel superior de las listas necesita establecerse en - 1em. Pero esto no empujará los menúes lo suficientemente lejos como para estar alineada con el elemento de la lista correspondiente, porque por defecto las alturas de línea son mayores que 1em (generalmente 1.2em), así que tenemos que añadir un poco de código para establecer la norma UL inicial:

Debido al efecto de cascada por el cual la lista de segundo nivel se muestra, la lista de tercer nivel también se manifestará, por lo que también tenemos que explicitar que se esconda la lista de tercer nivel (recordemos que tenemos que duplicar la pseudo clase : hover con la clase .sfhover ):

Ahora, esta regla se puede contradecir para que sea mostrada cuando se pasa por encima con el mouse por el elemento de la lista correspondiente ampliando la vista de la lista desplegable (que con el menú desplegable de un solo nivel era # nav li: hover ul, # nav ul {li.sfhover left: auto;}):

Y eso establecerá un sólido menú desplegable de dos niveles.

Siguiendo la misma lógica puedes incorporar tantos niveles como desees:

Para tres niveles, por ejemplo:

Y en el loco caso de que necesites cuatro niveles:

Haz clic aquí para ver una demostración de los menúes dropdowns de único nivel »
Haz clic aquí para ver una demostración de los menúes dropdowns de doble nivel »
Haz clic aquí para ver una demostración de los menúes dropdowns de triple nivel »
Haz clic aquí para ver una demostración de los menúes dropdowns de triple nivel »
Haz clic aquí para ver una demostración de los menúes dropdowns dispuestos en forma vertical »
Haz clic aquí para ver una demostración de los menúes dropdowns estilizados con CSS »

Se ha creado un plugin jQuery para implementar una barra de navegación con un menú desplegable (les invito a que lean este y ese artículo) en varios submenús.

Cuando tratamos con interfaces de usuario en páginas web uno de los ejemplos más típicos es el menú desplegable, osea, una barra de navegación que muestra varios enlaces y que, al ponerse encima de esos enlaces, muestra un submenú con otros enlaces. Ese submenú que aparece automáticamente, también desaparece por si solo cuando el usuario le retira el puntero del mouse.

Objeto para configurar las opciones del menú
Para realizar este ejercicio de la manera más versátil posible hemos implementado una notación para generar las opciones del menú en una variable Javascript de tipo objeto. Es decir, los menús y submenús se especificarán con Javascript y enviaremos ese objeto al plugin para generar el HTML necesario para crearlos en la página.

Así que esta es la variable donde definimos el contenido del navegador desplegable:

Como se puede ver se ha definido un array donde tenemos cada uno de los enlaces principales, que a su vez se declaran con un objeto que tiene varias propiedades.

Para cada enlace principal tenemos los datos:

• texto: con una cadena para el texto del enlace
• url: con una cadena para la URL a la que dirigir el enlace
• enlaces: un array con cada uno de los enlaces del submenú asociado a este enlace principal. Los enlaces del submenú que colocamos en este array son otros objetos. Con los siguientes datos:
o texto: el texto para el enlace del submenú
o url: la URL a la que dirigir este enlace del submenú.

Una vez entendido ese formato para el objeto de los enlaces, podemos ver el código del plugin.

Como se puede ver, gran parte del código es para hacer unos bucles por los que recorrer todo el array de enlaces que pasamos como parámetro al plugin y construir el HTML necesario para el menú.

Luego se crearon unos eventos para mostrar y ocultar los submenús al situarse encima de los enlaces.

Uno de los temas a destacar en este código es que las capas de los submenús se tienen que colocar al lado de los enlaces principales. Para ello, se utiliza la función colocarCapasSubmenus(), que recorre el array de capas del submenú y coloca una a una todas estas capas en una posición absoluta que se calcula en función de la posición del elemento LI donde está el enlace principal.

Ejecutar el plugin para generar el menú desplegable
Ahora sólo nos queda invocar al plugin para generar el menú desplegable. Para eso necesitamos una capa donde mostrar el menú en el código HTML.

Además, necesitamos el array con los enlaces del menú, que habíamos definido al principio del artículo en la variable "opciones_menu". Esa variable la tenemos que enviar al iniciar el plugin.

Con esto ya tenemos el menú funcionando en la página. Sólo nos faltaría un poco de CSS.

CSS para definir el aspecto del menú desplegable
Por último vamos a decorar el menú según nuestros intereses, para que quede acorde con el diseño de nuestra página.

Para definir los estilos de los enlaces del menú principal, lo podemos hacer a partir de la capa donde estamos mostrando el menú, a la que habíamos puesto en le código HTML un identificador id="menu". A través de ese identificador podremos definir no sólo el estilo de la propia capa, sino también el estilo de la lista UL que se generará para el menú y de los elementos LI o los enlaces.

También podemos estilizar cada una de las capas de los submenús, a las que en el código del plugin le pusimos la clase CSS "submenu". Ese nombre de clase es fijo en el código de nuestro plugin, por lo que una mejora sería que el plugin recibiera el nombre de esa clase en un array de opciones, para que cada usuario lo pudiera configurar.

Como de momento ese nombre de clase no se puede cambiar, tendríamos que aplicar los estilos de esta manera.

Como se puede ver, no sólo se aplican estilos a la capa del submenú, sino también a las listas UL que contendrá, sus elementos LI, enlaces, etc.

Así que no hay mucho más que contar sobre este menú desplegable. Seguramente a los lectores se les ocurrirá varias mejoras, pero de momento está bien tal como nos ha quedado y no deseamos complicar aun más el ejercicio.

Si deseas ver el menú desplegable hasta el momento, puedes hacerlo desde este enlace al ejemplo en funcionamiento.