El menú con CSS

Imprimir

menusHay 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> ... </ul>  y sus ítems  <li> ... </li>  y empleando la etiqueta de enlace  <a> ... </a> .

En primer lugar debemos distinguir entre menú horizontal y menú vertical. Tanto uno como el otro son semejantes salvo en el detalle de la posición en la que se muestran en la página.

El primer paso es distinguir la lista que formará el menú de las listas normales, para ello creamos  un selector ID llamado #menu.

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. En el ejemplo siguiente el menú es horizontal. Si queremos que quede por encima de la cabecera debemos añadir la propiedad clear: both; a ésta. Ver Ejemplo.

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 complejos, ejemplos de esto los puedes encontrar en esta dirección  http://exploding-boy.com/  : Ejemplos1, Ejemplos2.

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.

menu1_css

menu1_vista

menu1_html

endefensadeinternetEl exponente máximo de esta sociedad es Internet, red de redes por antonomasia y la causante de la planetización de la gente corriente. La creación del World Wide Web, en 1989 se debe a Tim Berners-Lee (2000), investigador del Laboratorio Europeo de Física de Partículas (CERN).

internet1

Durante ya bastantes años diseño y preparo una breve Web para mis alumnos de informática. Si aquí no aparece algo distinto de lo que ya se ha dicho espero que, al menos, consiga expresarlo de forma más clara. - Jesús Plaza.
─ El conocimiento es libre ─