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
Valora esta entrada
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!

Entradas relacionadas:

Pseudo Clases :link, :active, :hover y :visited
- 34
Las pseudoclases sirven para definir estados en los que se encuentra una etiqueta html. Vemos las pseudoclases link, active, hover y visited.
Elementos en línea. Elementos bloque. Elementos inline-block.
- 217
Hemos aprendido como se define el margen, el borde, el relleno y el ancho y la altura. Nos queda pendiente ver como se relacionan estas cajas html entre ellas. Si se apilan. Si se ponen una al lado de...
Selectores CSS. Que son y como usarlos
- 146
Guía sobre los principales selectores css que existen para llamar a las etiquetas de un documento web.
Factores que afectan al tiempo de carga de una página web
- 255
Resumimos los principales factores que deberemos tener en cuenta desde el punto de vista de alguien que ha estudiado un curso de confección y publicación de páginas web para la optimización y mejora d...
Como crear columnas con CSS de forma fácil mediante Inline-block y float
- 40
Dado un mismo código html como crearíamos columnas en un documento web utilizando floats versus haciéndolo con inline-block;
Concepto de cascada en CSS
- 141
En CSS existen una serie de normas que dan prioridad a las instrucciones que afectan a cada etiqueta html en función de su importancia, grado de especificidad y orden de aparición. Veámoslo.
La propiedad overflow
- 16
Resumen de uso de la propiedad de overflow de CSS. Apuntes de teoría del curso IFCD0110 del curso confección y publicación de páginas web.
Box Sizing, como modificar el modelo de cajas convencional
- 76
¿Se rompen las columnas de tu web al redimensionar el ancho de tu navegador? En esta publicación hablamos de box-sizing con un ejemplo real.
Ejemplo de centrado vertical y horizontal con CSS
- 52
Ejemplo explicado sobre como centrar verticalmente y horizontalmente una caja dentro de otra mediante position relative y absolute.
Maquetar una página de prestashop 1.6 con bootstrap
- 319
Maquetar páginas en Prestashop 1.6 con tablas es un deporte de riesgo para implementadores anclados en el pasado. En esta entrada te muestro un ejemplo sencillo y sin demasiadas complicaciones para qu...
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.