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:

Elementos en línea. Elementos bloque. Elementos inline-block.
- 439
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...
Menú horizontal con submenú desplegable horizontal mediante CSS
- 168
Ejemplo de menú horizontal con submenú desplegable horizontal mediante CSS. Incluye archivo descargable.
Concepto de cascada en CSS
- 234
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.
Cuidado con los tutoriales pdf obsoletos sobre html, css y javascript
- 60
En internet se encuentra mucho material de gran calidad para aprender lenguajes como html, css, y javascript. ¿Pero todos los pdf sirven?
Colores CSS para web
- 624
Existen distintas formas de indicar los colores que queremos dar a los elementos de un documento. Básicamente necesitamos dominar los colores RGB, RGBa y Hexadecimal. Se muestran varios ejemplos de us...
Unidades de medida absolutas y relativas en CSS
- 324
¿Como se define el tamaño de cada uno de los elementos de una página web? En CSS podemos encontrar medidas absolutas y relativas. Veamos a que equivale cada una.
Tipografía CSS: como usar web safe fonts y tipografías personalizadas.
- 419
La sal es a la cocina lo que las tipografías son al mundo web. Debemos conocerlas y usarlas con conocimiento. En esta entrada se explica que CSS se debe escribir para hacerlo posible.
Como crear columnas con CSS de forma fácil mediante Inline-block y float
- 177
Dado un mismo código html como crearíamos columnas en un documento web utilizando floats versus haciéndolo con inline-block;
Sintaxis CSS básica. Cómo se escribe el CSS.
- 248
Escribir CSS es fácil. Es un lenguaje que no tiene sorpresas. En esta entrada se explica como se escribe una instrucción CSS.
Resumen de como comentar código en html, css y javascript
- 584
En las fases iniciales de aprender html, css y javascript nos vemos abrumados por tanta información. Con la entrada de hoy hacemos un resumen sobre como comentar código en los principales lenguajes de...
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.