Crear menú de cabecera con HTML/CSS | Tutorial paso a paso

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í:

  • Llamar a la hoja de estilos dentro de la sección head.
  • Incluir fontawesome en el head.

Espera, ¿qué es fontawesome?

Un buen desarrollador web no puede no saberlo.

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

  • Después hemos abierto una etiqueta header para incluir nuestra cabecera.
  • Dentro de esta hemos abierto una etiqueta nav para el menú de navegación.
  • Dentro de esta, una etiqueta de lista ul para crear la lista de elementos del menú.
  • Dentro de esta, varios elementos de lista li para cada elemento del menú.

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:

  • Para que no haya espacios en blanco.
  • Para que podamos mantener la estructura bien ordenada.

¿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ú.

  • Una que contiene un icono de fontawesome.
  • Una que va a actuar como borde para la decoración.
  • Una que va a contener el texto.
  • Y las tres están contenidas en un enlace.

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.

  • Estamos centrando este contenedor de forma que ocupe un ancho de 80% en la pantalla.
  • Si la pantalla es muy grande, queremos que el ancho no pase de 1000px.

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

  • Margin y padding cero, porque no queremos espaciado exterior ni interior.
  • Y estilo de lista ninguno (none) para que no se muestren los puntitos de lista.

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

  • Haciendo que se rendericen como elementos de bloque en línea.
  • Y dándoles un ancho del 100% dividido entre los cinco elementos que hay (20%).
  • Si necesitas más o menos elementos, puedes rehacer la división (100 entre número de elementos).

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:

  • Le hemos quitado el subrayado que aparece por defecto en los navegadores.
  • Le hemos dado un color distinto.

Al icono de fontawesome i:

  • Le hemos dicho que ocupe el ancho entero de su contenedor.
  • Hemos centrado el icono con text-align:center;
  • Los hemos alineado todos verticalmente para que no aparezcan a alturas distintas.

Al elemento decorativo que lleva la clase .borde:

  • Le hemos dicho que ocupe el 100% del ancho de su contenedor.
  • Le hemos dado una altura y un fondo para que se vea.

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

  • También lo hemos establecido con ancho compelto.
  • Para poder centrar el texto.
  • Y darle un color de fondo.

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.