Tutorial menú horizontal en CSS

menu horizontal

Cuando comenzamos a aprender los conceptos básicos del css nos surgen muchas dudas. Una de las que a mi me surgió cuando empezaba a aprender este lenguaje era la de cómo crearía yo un menú horizontal en css.

Es muy fácil de hacer y no se requieren muchos conocimientos de css, sólo lo básico.

Tutorial menú horizontal en CSS

Vamos a empezar desde cero, por lo más básico.

Para hacer un menú, se puede hacer de muchas formas distintas pero, lo más usado es crearlo con listas desordenadas. Mejor lo explico con ejemplos, así nos enteramos mejor.

Lista ordenada es aquella en la que cada elemento de la lista tiene un número que va incrementando en relación a la posición que ocupa en ésta. Un ejemplo práctica sería el siguiente:

ejempo lista ordenada

Lista desordenada, en cambio, es aquella en la que sus elementos no tienen una numeración. Es decir, en vez de ir numerados según la posición que ocupan en la lista, están desordenados y no se muestra numeración alguna. Se podrá observar que, por defecto se muestra un punto relleno en chrome (aunque la visualización por defecto a veces cambia según los navegadores).

lista desordenada

Estilos para un menú horizontal – código css

Vamos a trabajar con la lista desordenada, ya que lo primero que vamos a hacer es quitarle esos puntos redondos que se ven por defecto para que no se vean.

list-style none

Con este código ya le hemos quitado los puntos que vienen predefinidos en la lista desordenada. La propiedad list-style se puede aplicar tanto para las listas desordenadas (ul) como para las ordenadas (ol).

Ahora, con la propiedad float: left vamos a posicionar los elementos de la lista uno al lado del otro para así conseguir tener un menú posicionado de una forma horizontal.

float left y margin

Float: left sirve para posicionar los elementos uno a la derecha del otro. Como la propiedad indica, lo que hacemos es pegarlos a la izquierda. El margin-right se lo he puesto para que no queden muy juntos los elementos de la lista y se pueda ver todo de forma correcta.

La disposición horizontal se puede hacer también aplicándole la propiedad display al los elementos de la lista (li), de la siguiente manera.

display inline-block

Como podemos apreciar, al cambiar la propiedad display que viene por defecto por display: inline-block; vemos que los elementos de la lista han dejado de tener esos puntitos o, en nuestro caso ya que se trata de una lista ordenada, los números de las posiciones de la lista. Esto es debido a que ahora ya no estamos tratando a los elementos de la lista como si fueran elementos de una lista, sino que los estamos tratando como un elemento de línea con propiedades de elemento de bloque.

 

  • Isz

    Excelente

    • Gracias. Me alegro que te haya servido de ayuda 🙂

    • Me alegra que te guste y espero que te haya servido de ayuda. Cualquier duda coméntamela 😉