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

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

Print Friendly, PDF & Email
Ejemplo de creación de menú horizontal en CSS: inline-block y float
5 (100%) 1 voto

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.

Menú horizontal con CSS en blanco y negro

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!

Francesc Ricart
hola@francescricart.com

Soy un ingeniero industrial a quién le apasiona aprender y enseñar. En el mundo del marketing online he encontrado una de mis pasiones. Ejerzo como docente ocupacional y privado para empresas. Y también hago consultoría web para PIMES, autónomos y otros emprendedores como yo. Ayudo a las empresas en cualquier temática relacionada con su presencia digital y herramientas web. Aunque mi especialidad es el posicionamiento en buscadores (SEO). A nivel de formación lo que más feliz me hace es que un alumno haga de mi pasión una forma de vida y le ayude a encontrar trabajo. A nivel de negocios ayudo a empresarios a desenvolverse con soltura en el mundo digital y les animo a hacer cada vez más cosas que nunca hubieran imaginado que ellos también podían hacer. En este camino les ayudo haciendo todo aquello dónde ellos no llegan y crecemos juntos. Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.