Crear un menú horizontal

A continuación se muestra la transformación del anterior menú vertical sencillo en un menú horizontal sencillo. En este ejemplo, las propiedades para establecer el aspecto de los elementos del menú se definen en los elementos <a> en lugar de definirlas para los elementos <li> como en el ejemplo anterior.

En cualquier caso, es indiferente el elemento en el que se aplican los estilos que definen el aspecto de cada opción del menú.

Se partirá del siguiente código HTML:

<ul>
<li><a href="#" title="Enlace genérico">Elemento 1</a></li>
<li><a href="#" title="Enlace genérico">Elemento 2</a></li>
<li><a href="#" title="Enlace genérico">Elemento 3</a></li>
<li><a href="#" title="Enlace genérico">Elemento 4</a></li>
<li><a href="#" title="Enlace genérico">Elemento 5</a></li>
<li><a href="#" title="Enlace genérico">Elemento 6</a></li>
</ul>

El código CSS resultante del menú vertical anterior fue el siguiente:

ul.menu {
width: 180px;
list-style: none;
margin: 0;
padding: 0;
border: 1px solid #7C7C7C;
}
ul.menu li {
border-bottom:1px solid #7C7C7C;
border-top: 1px solid #FFF;
background: #F4F4F4;
}
ul.menu li a {
padding: .2em 0 .2em .5em;
display:block;
text-decoration: none;
color: #333;
}

El resultado final será el siguiente:

El proceso de transformación de menú vertical a horizontal constará de los siguientes 4 pasos:

1.- ELIMINAR ANCHOS Y BORDES Y APLICAR POSICIONAMIENTO FLOTANTE

El primer paso consistirá en eliminar la anchura y el borde del elemento <ul> y aplicar las propiedades float y clear:

ul.menu {
clear: both;
float: left;
width: 100%;

list-style: none;
margin: 0;
padding: 0;
}

El resultado será el siguiente:

2.- float para los items de la lista

La clave de la transformación reside en modificar la propiedad float de los elementos <li> del menú:

ul.menu li {
float: left;
}

El resultado será el siguiente:

3.- MODIFICAR Bordes y PADDINGS

Posteriormente deberá modificarse el padding y los bordes de los enlaces que forman el menú:

ul.menu li a {
padding: .3em;
display: block;
text-decoration: none;
color: #333;
background: #F4F4F4;
border-top: 1px solid #7C7C7C;
border-right: 1px solid #7C7C7C;
border-bottom: 1px solid #9C9C9C;

}

Llegados a este punto, el resultado será el siguiente:

4.- Borde izquierdo para la lista

Por último, se añade un borde izquierdo en el elemento <ul> para homogeneizar el aspecto de los elementos del menú:

ul.menu {
clear: both;
float: left;
width: 100%;
list-style: none;
margin: 0;
padding: 0;
border-left: 1px solid #7C7C7C;
}

El código CSS final quedará de la siguiente forma:

ul.menu {
clear: both;
float: left;
width: 100%;

list-style: none;
margin: 0;
padding: 0;
border-left: 1px solid #7C7C7C;
}
ul.menu li {
float: left;
}
ul.menu li a {
padding: .3em;
display: block;
text-decoration: none;
color: #333;
background: #F4F4F4;
border-top: 1px solid #7C7C7C;
border-right: 1px solid #7C7C7C;
border-bottom: 1px solid #9C9C9C;

}


REFERENCIA

CSS

SELECTORES

COLORES

BOX MODEL

FONDOS

POSICIONAMIENTO

VISUALIZACIÓN

TIPOGRAFÍA

TEXTO

ENLACES

IMÁGENES

LISTAS

TABLAS

FORMULARIOS

LAYOUT

Ejercicios

ANEXO