Ejemplo de creación de menú horizontal en CSS: inline-block y float

En esta publiación veremos como crear un menú horizontal a partir de dos estrategias CSS.

1. La primera mediante el uso de la propiedad inline-block.
2. La segunda mediante el uso de floats.

Veremos que obtenemos el mismo resultado prácticamente con las dos y que por tanto somos libres de elegir en cada circunstancia la que mejor nos convenga.

El código html usado en los dos casos es el siguiente:

<nav><ul>
        <li><a href="#">Inicio</a></li>
        <li><a href="#">Quiénes somos</a></li>
        <li><a href="#">Servicios</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Contacto</a></li>
    </ul></nav>

Estrategia mediante inline-block

*{margin:0;padding:0;box-sizing:border-box;font-size:0;}
            
nav a{
    text-decoration:none;
    color:inherit;
    font-size:14px;
    } 
    nav li{
    display:inline-block;
    width:10%;
    padding:5px 10px;
    background-color:#000;
    border:1px solid #000;
    text-align:center;
    color:#fff;
    }
    nav li:hover{
    background-color:#fff;
    color:#000;
    }

Las etiquetas <li> son elementos bloque.

Una forma de comprobarlo es por ejemplo dibujando su borde y aplicando un margen. Si fueron elementos en linea el margen superior e inferior que indicáramos no se respetaría (es una de las particularidades de los elementos en línea).

En este ejemplo hacemos que se apilen unos al lado de otro modificando su comportamiento por defecto a inline-block.

A continuación sólo tenemos que indicar un ancho, un padding.

Otro detalle a considerar es que en el selector universal hemos escrito la propiedad font-size:0; para evitar un pequeño espacio que quedaría por defecto entre bloques.

Finalmente fijaros que indicamos un fondo negro y una fuente blanca. Los colores se invierten al pasar el ratón por encima. Como particularidad fijaros en la propiedad color:inherit; para los enlaces. Lo hago así para que hereden el color de los elementos lista. La razón es que la propiedad :hover deja dejaría de tener efecto si el ratón no estuviera inmediatamente encima del enlace y esto haría que en ocasiones se viera fondo blanco y color de enlace blanco.

Estrategia mediante uso de la propiedad float

nav li{
       float:left;
       width:10%;
       padding:5px 10px;
       background-color:#000;
       border:1px solid #000;
       text-align:center;
       color:#fff;
       }

En el segundo caso usamos float:left;

Es un ejemplo mucho más extendido y que encontraréis por todas partes.

Personalmente no me gusta abusar de este sistema porqué recordar que las cajas saltan del flujo natural de cajas del documento.

Por otro lado tiene la ventaja que estas circunstancias la línea *{font-size:0;} deja de ser necesaria.¡Hola!

Querido lector,

Ahora ya dispones de herramientas para no abusar de float. ¡Úsalo siempre con conocimiento de causa!

Para finalizar, ¿te animas a hacer un menú vertical?

¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!