Menús con CSS

Imprimir

Prácticamente todo sitio web tiene algún tipo de menú para navegar por las distintas páginas que componen el Web-Site, aunque la tendencia actual es hacer páginas web mínimas.

Los menús se puenden implementar de diversas formas y utilizando distintas tecnologías:

  • Utilizando tecnología Flash (quedan muy vistosos)
  • Programando un menú en JavaScrip (hay que tener ciertas nociones de programación).
  • Utilizando reglas CSS (son muy sencillos pero pueden quedar muy bien si empleamos algo de tiempo, además son rápidos de cargar por el navegador).

Aclarando ideas:

  • Básicamente los menús son de dos tipos: HORIZONTALES y/o VERTICALES.
  • Todo menú resalta de alguna forma sus ítems cuando el ratón pasa sobre ellos: cambiando el color de la letra, o del forndo del ítem, añadiendo algún tipo de pequeña imagen, realizando algún tipo de momiviento, etc...
  • Todo menú destaca el ítem activo en ese momento de alguna de las formas antes mencionadas.
  • Un menú, esté construido como estés construido no deja de ser una lista de ítems que, a su vez, puede tener una lista de subítems, y así sucesivamente.

Creación de menús simples con reglas CSS:

Hay varias formas de implementar un menú en una página Web utilizando reglas CSS, auque lo más común es modificando las propiedades de las listas desordenadas, etiqueta <ul> y cada uno de sus ítems con la etiqueta <li> empleadas conjuntamente con la etiqueta <a> de enlace.

En primer lugar debemos diferenciar las listas normales de las listas que utilizaremos para crear un menú, ya sea horizontal como vertical. Podemos utilizar identificadores #menu (si sólo vamos a poner un menú) o de clase .menu, si vamos a poner varios menús semejantes.

Los menús horizontales se diferencian de los verticales no solo en la posición que ocupan en la página sino en algunas propiedades CSS que vamos a ver:

Añadiendo / Suprimiendo la línea float: left; de la regla .menu li conseguimos un menú horizontal ( si la ponemos) o vertical ( si la quitamos). Evidentemente luego debemos posicionar el menú en el lugar que deseemos. Un ejemplo.

[ Vista previa del modelo ]

Reglas comunes para los dos tipos de menús:clases_gen_menu

Reglas que hay que añadir para el menú horizontal:clases_menu_h

Reglas que hay que añadir para el menú vertical:clases_menu_v

Contenedor del menú horizontal:

caja_nav

Contenedor del menú vertical:

caja_lad

En el código HTML, el menú horizontal queda así:

menu_h

En el código HTML, el menú vertical queda así:

menu_v

[ Vista previa del modelo explicado ]

Modificando los estilos de cada elemento del menú y utilizando imágenes de fondo y las pseudo-clases :hover y :active, se pueden crear menús horizontales y verticales complejos, ejemplos de esto los puedes encontrar en esta dirección http://exploding-boy.com/ : Ejemplo #1: menú horizontal, Ejemplo #2: menú horizontal. Ejemplo #3: menú vertical.

Además existen otros muchos menús diferentes, horizontales y verticales, como los que puedes ver aquí: http://alvit.de/css-showcase/css-navigation-techniques-showcase.php.

aula_virtual_3con14

Utilidades

imprescindibles FireFox Google Chrome Opera Safari Acrobat Reader 7zip Flash Player Java FileHippo

Visitas...

TOTAL189855