Menu Horizontal en HTML con listas y CSS


Existen diferentes maneras de crear un menu en HTML con o sin ayuda de Hojas de estilo. En este caso abarcaremos como hacer un menu horizontal con listas.

lista

Utilizando estilos CSS podemos remover la imagen que indica la lista y podemos ubicar de manera horizontal cada elemento de la lista, para asi tener como resultado un menu. Los estilos que usaremos son:
  • float – permite sacar a un elemento del flujo del documento, y posicionarlo a la izquierda o derecha de otros elementos. En el caso de la lista ubicara cada inciso de la lista a la derecha del anterior.
  • padding - permite agregar un relleno a cada elemento de manera que no queden encimados los elementos.
  • list-style-type - esta propiedad nos permite cambiar la imagen de la lista o en este caso para el menu, removerla.
Utilizaremos estilos compuestos, los cuales sirven para establecer estilos especificos. Por ejemplo: si contamos con una etiqueta div de clase “estilo1″ y dentro de esta etiqueta tenemos un enlace (o etiqueta a), entonces la regla de CSS seria estilo1 a es muy importante el espacio entre cada clase y etiqueta. Los estilos compuestos no tienen limite, pueden in de un simple estilo compuesto de una clase y una etiqueta, hasta tener un estilo asi (#container .estilo1 table .estilo3 li). El cual nos hablaria de un elemento de tipo lista dentro de una tabla con una clase llamada estilo 3 dentro de una division con una id container y una clase estilo1. Por revuelto que esto pueda sonar es importante que sea comprendido este concepto para continuar con el menu horizontal.

Para las personas que utilizan Dreamweaver, al momento de crear un estilo compuesto Dreamweaver nos da una muy sencilla explicación del estilo que estamos creando, lo cual los ayudara a no perderse en el proceso.

dw

Para efecto de este tutorial, crearemos una división con un id menu y crearemos una lista dentro de esta division.

listam

El propósito sera crear un estilo para las listas de la etiqueta menu, que de la propieda de flotar hacia la izquierda, de manera que se ubiquen una despues de la otra de manera horizontal.

Para esto usaremos un estilo compuesto #menu li . Podría ser #menu ul li, pero recordemos que queremos dar las propiedades a cada elemento de la lista (li) y no a la lista entera (ul).
El código en CSS sería el siguiente.
estil
Podemos ver que nuestra lista “desaparecio” a los ojos del usuario, sin embargo, podemos mejorarla agregando mas estilos.
res
Cuando agreguemos un vinculo, notaremos que desaparece parte del estilo que hemos creado, esto se debe a los estilos por default de la etiqueta a que indica un enlace. Para solucionar este problema debemos crear una nueva regla de estilo compuesto para el menu, menu li a:
menuL
Con este estilo hemos terminado nuestro menu horizontal.





Enlaces Relacionados:


No encontrastes lo que Buscabas ? Prueba con la Busqueda de Google

0 comentarios

Agrega tu Comentario. Por favor no SPAM!
Subscribete
:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Publicar un comentario

Recuerda: La Moderación de Comentarios está habilitada. Por eso, es muy probable que tus mensajes demoren en ser publicados.

 

IntercambiosGraficos | Comparte tus Gráficos | Copyright © 2009 | Todos los Derechos Reservados

ss_blog_claim=2338e89e1cbf6df8c94a9fef498cd116