Menus basico con Listas y CSS

Creación de menús básicos con listas utilizando CSS

En la red existen numerosos ejemplos de como crear menús utilizando hojas de estilo (CSS) pero muy pocos de ellos explican el proceso de creación es decir los razonamientos que hay que hacer para poder realizar estos elementos.

En estos apuntes intentaré explicar el proceso de elaboración de un menú de este tipo, razonando la utilización de las diferentes propiedades.

El uso de listas para esta función se enmarca dentro de las directrices de accesibilidad web y se adapta perfectamente al concepto de Web 2.0.

Aclaremos antes de empezar que lo que se va explicar a continuación será válido y funcionará si se utiliza el DTD adecuado que para todos los temas de CSS de grafikas.es son el XHTML Transitional y el Stricttambién son válidas con XHTML 1.1. Cualquier otro DTD o la ausencia del mismo en el documento puede hacer inservible lo aquí explicado. No se ha intentado mantener compatibilidad con IE5 dado que actualmente no es usado por más de un 1% de los internautas. Aunque la mayoría de lo explicado funcionará también en este navegador.

Menú vertical básico utilizando listas desordenadas y CSS.

Empezaremos por el caso más simple de todos. Nuestra intención es crear un menú con diferentes enlaces, unos encima de otros, de forma que al situar el ratón encima de los enlaces estos cambien el color de forndo.

• Creamos (dentro del cuerpo del documento,por supuesto) la lista desordenada con los enlaces que en este caso serán enlaces a ninguna parte. El código será el siguiente:

El resultado del código anterior se mostraría asi en el navegador:

Esto podría ser un menú perfectamente válido, pero no se parece a lo que estamos buscando así que empezaremos a darle forma.

• A continuación vamos a cambiar el tipo de letra de los enlaces, quitarles el subrayado y ponerles un color de fondo. Para esto utilizaremos hojas de estilo en cascada (CSS). El código se puede colocar en el encabezado del documento XHTML utilizando la etiqueta <style type=»text/css»></style> o en un archivo aparte con la extensión «css» (en este caso no se pone la etiqueta <style>) y en la cabecera del documento HTML pondríamos lo siguiente:

En el primer caso el código a poner en la cabecera (head) del documento XHTML es:

1. <style type=»text/css»>
   
2.  li a {  
3. /*Mediante el selector li a, indicamos que estas propiedades
4. serán aplicadas a todos los enlaces que están dentro de una lista li*/
5.        font-family:»Trebuchet MS»,arial,verdana,helvetica;
6. /*Esta propiedad establece el tipo de letra dando 4 opciones*/
7.        text-decoration:none; 
8. /*Esta propiedad es la que elimina el subrayado de los enlaces*/
9.        background:#ff9;
10. /*Esta propiedad cambia el color de fondo de los enlaces*/
11.  }
12. </style>

• Como vemos siguen apareciendo los puntos (viñetas o topos) a la izquierda de nuestros enlaces, y esto no lo queremos por lo que utilizaremos la propiedad list-style-type que aplicaremos al selector ul, añadiendo el siguiente código a nuestro estilo:

Podemos observar como nuestro «menú» se encuentra separado del borde de la página, esto es debido al margen interno que de forma automática se aplica a los elementos ul, para remediar esto utilizamos la propiedad padding que es la que controla los márgenes internos de los elementos, como en otras ocasiones resuta que Internet Explorer va por su cuenta y esto no le vale, deberemos (desgraciadamente) utilizar la propiedad margin-left (margen izquierdo) y darle valor 0. Por lo tanto añadimos al selector ul esta propiedad quedando de la siguiente manera:

Ya hemos hecho lo más dificil, ahora vamos a cambiar el color al texto de los enlaces (utilizaremos la propiedad color) y vamos a separar los textos de los bordes y entre ellos (utilizando la propiedad padding). Es decir añadiremos al selector «a» esas propiedades.

1. li a {  
2. /*Mediante el selector li a, indicamos que estas propiedades
3. serán aplicadas a todos los enlaces que están dentro de una
4. lista li*/
5.        font-family:»Trebuchet MS»,arial,verdana,helvetica;
6. /*Esta propiedad establece el tipo de letra dando 4 opciones*/
7.        text-decoration:none; 
8.  /*Esta propiedad es la que elimina el subrayado de los enlaces*/
9.        background:#ff9;
10. /*Esta propiedad cambia el color de fondo de los enlaces*/
11.        color:#fff;    
12.  /*Color del texto blanco */
13.        padding:4px 10px;
14. /*Le ponemos «padding» superior e inferior de 4px y derecho e
15. izquierdo de 10px;*/
16.        font-size:12px;
17.  /*De propina y para leerlo mejor aumentamos el tamaño del texto
18. a 12px*/
19.     }

¿Arrgggg! ¿qué sucede? (si usa ie nada, pero debería cambiar de navegador), nada que no se pueda remediar, resulta que el padding hace que se monten unos con otros ya que los elementos » a» son de línea y esto es normal en ellos, por lo tanto vamos a convertirlos a elementos de bloque (además nos iba a hacer falta si queriamos que al pasar por encima el ratón cambiara todo el fondo) para ello utilizamos la propiedad display con el valor block.

De esta forma podemos intentar añadir bordes al menú anterior entre los elementos del menú. Si lo pensamos parece lógico que utilizando una propiedad que permita poner bordes a un elemento será suficiente. Veamos que pasa si añadimos al selector de los enlaces la propiedad border-top:1px solid black.

Espero que sirva para que podais crear vuestros propios menús sin copiar ni pegar código, razonando por vosotros mismos.

Menú horizontal

Ahora se nos ocurre hacer un menú horizontal, es decir que los enlaces vayan uno al lado de otro no encima. ¿qué debemos hacer? pues preguntarnos si existe alguna propiedad que disponga los elementos de esa manera, uno al lado de otro. para las listas la propiedad display con el valor inline hace esto, pero aquí no sirve ya que al haber puesto los enlaces como elementos de bloque (display:block;) estos siguen unos encima de otros por lo que la opción que nos queda es utilizar la propiedad float (flotar) con los elementos li ya que nos permite controlar como se coloca un elemento respecto al siguiente, de esta forma eligiendo el valor left cada uno de los elementos de la lista se coloca a la izquierda del siguiente quedando todos en línea.

Por lo tanto debemos añadir a nuestro estilo la siguiente línea y el menú ya quedará horizontal (y deberemos quitar o cambiar el ancho asignado a las etiquetas a, si vemos que no cabe en la página;):

La verdad que es simple, sólo añadir una línea pero lo importante es razonar por qué.

Repito que lo que se pretende es crear nuestros propios menús sin copiar ni pegar código, razonando por vosotros mismos.

Los problemas no terminarán aquí ya que si queremos el menú centrado en la pantalla o que al cambiar el tamaño del navegador no se nos descoloque tendremos que añadir alguna cosa.

Veámoslo con un ejemplo. Vamos a intentar centrar nuestro menú en la pantalla.

Tengamos en cuenta que el elemento «ul» al ser un elemento de bloque ocupa por defecto todo el ancho de la pantalla, entonces podríamos utilizar la propiedad text-align con el valor center que haría que lo que esté dentro de la etiqueta » ul» se sitúe centrado

Pero no, no funciona porque los elementos li tienen la propiedad float.¿Entonces?¿qué podemos hacer? Una posible solución sería establecer unas medidas a nuestro menú; pondremos 100px a cada enlace y 480px a la lista ya que tenemos 4 enlaces de 100 con un «padding» total de 20 cada uno; y centrarlo en la página mediante márgenes automáticos en el elemento ul. Esto no funciona en IE6 y necesitaremos establecer para el elemento que contenga la lista (puede ser body, div, li etc..) la propiedad text-align con el valor center

Como se comprueba, el hecho de que IExplorer no respete las especificaciones CSS supone una pérdida de tiempo y muchos quebraderos de cabeza. Deberíamos utilizar otros navegadores y así forzar a Microsoft a respetar las normas.