INICIO

CREAR MENÚ DE CABECERA CON HTML/CSS | TUTORIAL PASO A PASO

Vamos a aprender a construir un menú de cabecera desde cero.

Haremos todo con HTML y CSS paso a paso.

Nota: parto de la base de que tienes nociones básicas de HTML y CSS. Si has seguido mi curso gratis de desarrollo web, estás más que preparado para afrontar este artículo.

Empecemos:

1. Estructura HTML

Primero creamos una estructura de documento HTML.

No hace falta que lo escribas a mano porque es una tontería.

Ver: chuleta de fragmentos de código frecuentes para copiar y pegar.

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>Super Título</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
...
</body>
</html>

Puedes ponerle el nombre que quieras, yo le he puesto cabecera.html

2. Estilo CSS

Añadiremos una hoja externa con nuestro super código para estilizar la cabecera.

De momento pondremos esto, pero luego lo modificaremos.

.super-cabecera{
    position:relative;
}

Puedes guardarla con el nombre que quieras, yo le he puesto css-cabecera.css

Y la he guardado en la misma carpeta que el documento html.

Paso 3. Estructura de la cabecera en el HTML

Editaremos el documento HTML previamente creado.

Te muestro lo que he hecho y luego te explico.

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>Super Cabecera</title>
    <link rel="stylesheet" href="css-cabecera.css">
    <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
</head>
<body>
<header class="super-cabecera">
    <nav>
        <ul><!--
            --><li><a href="#">
            <i class="fa fa-fw fa-home fa-5x"></i>
            <span class="borde"></span>
            <span class="texto">INICIO</span>
            </a>
            </li><!--
            --><li><a href="#">
            <i class="fa fa-fw fa-bug fa-5x"></i>
            <span class="borde"></span>
            <span class="texto">PARQUE</span>
            </a>
            </li><!--
            --><li><a href="#">
            <i class="fa fa-fw fa-bath fa-5x"></i>
            <span class="borde"></span>
            <span class="texto">BAÑO</span>
            </a>
            </li><!--
            --><li><a href="#">
            <i class="fa fa-fw fa-plane fa-5x"></i>
            <span class="borde"></span>
            <span class="texto">AEROPUERTO</span>
            </a>
            </li><!--
            --><li><a href="#">
            <i class="fa fa-fw fa-apple fa-5x"></i>
            <span class="borde"></span>
            <span class="texto">FRUTERÍA</span>
            </a>
            </li><!--
        --></ul>
    </nav>
</header>
</body>
</html>

A ver, vamos a revisar lo que se ha hecho aquí:

Espera, ¿qué es fontawesome?

Un buen desarrollador web no puede no saberlo.

Ver: ¿Qué es fontawesome y cómo incluirlo en mi web?.

Y aquí quizás te estés extrañando.

Hemos separado cada elemento de lista con un comentario HTML, ¿por qué?

Porque posicionaremos los elementos horizontalmente y no queremos que el espacio en blanco entre elemento y elemento interfiera con la cuenta total del ancho.

Queremos hacerlo elástico y responsive, así que no podemos permitirnos espacios en blanco descontrolados.

Por eso, separamos la lista con un comentario vacío:

¿Y por qué hay tantas cosas raras dentro de cada elemento de lista?

No son cosas raras, son etiquetas span.

Y hay tres en cada menú.

Bien.

Y esto, renderizado en el navegador se vería así:

cabecera-fontawesome

Está feo feísimo de la muerte.

4. Estilizar el menú con CSS

Igual que antes, te muestro el código que voy creando y te explico.

Esto iría en css-cabecera.css

.super-cabecera{
    position:relative;
}

.super-cabecera nav{
    position:relative;
    width:80%;
    max-width:1000px;
    margin:0 auto;
}

.super-cabecera nav ul{
    margin:0;
    padding:0;
    list-style:none;
}

.super-cabecera nav ul li{
    position:relative;
    display:inline-block;
    vertical-align:top;
    width:20%;
}

Pues básicamente hemos hecho cosas muy básicas.

Posicionar el contenedor nav en el centro usando margin:0 auto;

Ver: tutorial de cómo centrar elementos con CSS.

Luego hemos definido ciertas propiedades para el contenedor de la lista ul:

Luego hemos especificado que queremos los elementos de la lista puestos horizontalmente.

Y ya va tomando la forma que queremos:

navegacion-css

Pero sigue estando demasiado bocadilloso todo.

Queremos que sea más bonito.

Seguimos agregando las propiedades CSS oportunas.

.super-cabecera nav ul li a{
    text-decoration:none;
    color:#333;
}

.super-cabecera nav ul li i{
    display:block;
    vertical-align:top;
    width:100%;
    text-align:center;
}

.super-cabecera nav ul li span.borde{
    display:block;
    height:4px;
    background-color:#F48024;
}

.super-cabecera nav ul li span.texto{
    display:block;
    height:40px;
    line-height:40px;
    text-align:center;
    background-color:#CCC;
}

Hemos hecho una serie de especificaciones a los elementos que están dentro de los li.

Al enlace a:

Al icono de fontawesome i:

Al elemento decorativo que lleva la clase .borde:

Al elemento que llevará el nombre del menú .texto:

Y esto es lo que llevamos hecho.

menu-hecho-con-css

Está mejor pero sigue estando feo.

Seguimos trabajando un poco, reajustando varios aspectos del archivo CSS.

Este finalmente quedaría así:

html,
body{
margin:0;
padding:0;
}

.super-cabecera{
    position:relative;
}

.super-cabecera nav{
    position:relative;
    width:80%;
    max-width:1000px;
    margin:0 auto;
}

.super-cabecera nav ul{
    margin:0;
    padding:0;
    list-style:none;
}

.super-cabecera nav ul li{
    position:relative;
    display:inline-block;
    vertical-align:top;
    padding:10px 0 0 0;
    margin:0;
    width:20%;
}

.super-cabecera nav ul li a{
    text-decoration:none;
    color:#333;
}

.super-cabecera nav ul li i{
    display:block;
    vertical-align:top;
    width:100%;
    color:#999;
    text-align:center;
}

.super-cabecera nav ul li span.borde{
    display:block;
    height:4px;
    background-color:#F48024;
    margin-top:10px;
}

.super-cabecera nav ul li span.texto{
    display:block;
    height:40px;
    line-height:40px;
    text-align:center;
    background-color:#CCC;
}

/* Transiciones en efecto Hover */

.super-cabecera li,
.super-cabecera li *{
transition:400ms;
}

.super-cabecera nav ul li:hover{
    background-color:#F1F1F1;
}

.super-cabecera nav ul li:hover span.borde{
    background-color:#333333;
}

.super-cabecera nav ul li:hover a i{
    color:#222;
}

.super-cabecera nav ul li:hover a .texto{
    color:#000;
    background-color:#BBB;
}

¿Qué he hecho?

Redecorar algunos colores y espaciados.

Y añadir transiciones CSS para el caso de tener el cursor encima del elemento li.

Eso se observa en las líneas que incluyen li:hover como selector.

.super-cabecera nav ul li:hover{
    background-color:#F1F1F1;
}

.super-cabecera nav ul li:hover span.borde{
    background-color:#333333;
}

.super-cabecera nav ul li:hover a i{
    color:#222;
}

.super-cabecera nav ul li:hover a .texto{
    color:#000;
    background-color:#BBB;
}

Observa que estamos seleccionando los elementos a editar, y reescribiendo solo las propiedades específicas que queremos que cambien.

Hay una parte que quizás no hayas visto nunca:

.super-cabecera li,
.super-cabecera li *{
transition:400ms;
}

Esta parte no es necesaria, puesto que el efecto de cambio funcionaría igualmente.

Lo único que hace, y no es poco, es hacer que el cambio dure 400 milisegundos, en lugar de hacerse en un salto.

Así queda más fluido y suave el paso de una opción del menú a otra.

Y ahora tenemos una cabecera más estética y con su efecto de cursor por encima:

menu-personalizado

Está muy bonita, pero no podemos engañarnos.

Cuando la pantalla es más pequeña, esta cabecera se ve horrenda.

menu-no-responsive

Eso hay que arreglarlo, pero antes tenemos que aprender el concepto de diseño responsive.

Cuando tenga tiempo escribiré el capítulo siguiente.

De momento puedes hacer tres cosas:

Saludos.

Oye, ¿me invitas a un café por favor?

He quitado la publicidad de está web porque no me gustan los anuncios.

Me toma mucho tiempo elaborar estos artículos y sería super buena onda si me invitas a un café haciendo click en el botón siguiente: