Seguimos con la serie de vídeos/tutoriales para crear nuestra página web de un Restaurante en HTML y CSS desde cero. En este caso, vamos a crear un Header o Encabezado con su menú responsive 100% adaptado a todos los dispositivos.
En este caso hacemos el encabezado de la página web de un restaurante, pero puedes utilizar este header como quieras, para cualquier página o sitio web.
Veamos pues todo el proceso de crear este elemento tan importante de cualquier página web.
Además de ser lo primero que ven los usuarios, es lo primero que se carga en la página web (algo a tener en cuenta, si queremos poner alguna imagen o logo).
HTML de encabezado de web de restaurante
Antes de nada, como se que gustan mucho mis vídeos (modo ironía: on) te dejo por aquí la versión en vídeo del tutorial.
Lo primero que haremos, como siempre, es enlazar nuestra hoja de estilos con el archivo HTML. Para ello usaremos la etiqueta link y colocaremos la ruta de la hoja de estilos.
<link rel="stylesheet" href="style.css">
Puedes colocarlo debajo de la etiqueta <title>, en el head.
Después pasaremos ya con la estructura HTML. Primero crearemos la etiqueta <header> y luego iremos creando divs para envolver los diferentes elementos, como el logo y el menú de navegación.
Acto seguido, haremos la parte de HTML relacionada con el menú responsive, justo debajo de la apertura de la etiqueta <nav>.
Crearemos un <input> y un <label> para crear el menú responsive.
<input type="checkbox" id="check">
<label for="check" class="checkbtn">
<i class="toggle-menu">
<!-- Icono de menú hamburguesa -->
</label>Y después crearemos el <ul> para albergar los elementos del menú.
<ul class="main-menu">
<li class="menu-item"><a href="/">Inicio</a></li>
<li class="menu-item"><a href="/">Notros</a></li>
<li class="menu-item"><a href="/">Carta</a></li>
<li class="menu-item"><a href="/">Blog</a></li>
<li class="menu-item"><a id="nav-main-contact" href="/">Contacto</a></li>
</ul>
Y ya solo quedaría crear el div que usaremos para hacer la parte del “hero”, donde se mostrará la imagen de fondo, debajo de nuestra cabecera.
Te dejo aquí todo el código HTML para que puedas copiarlo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="main-header">
<div class="header-wrap">
<div class="wrap-logo-header">
<a href="/" class="logo-header">
Web<span>De</span><span>Restaurante</span>
</a>
</div>
<div class="wrap-nav-header">
<nav class="nav-header">
<input type="checkbox" id="check">
<label for="check" class="checkbtn">
<i class="toggle-menu">
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbG5zOnN2Z2pzPSJodHRwOi8vc3ZnanMuY29tL3N2Z2pzIiB3aWR0aD0iNTEyIiBoZWlnaHQ9IjUxMiIgeD0iMCIgeT0iMCIgdmlld0JveD0iMCAwIDM4NCAzODQiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDUxMiA1MTIiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxnPjxwYXRoIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZD0ibTM2OCAxNTQuNjY3OTY5aC0zNTJjLTguODMyMDMxIDAtMTYtNy4xNjc5NjktMTYtMTZzNy4xNjc5NjktMTYgMTYtMTZoMzUyYzguODMyMDMxIDAgMTYgNy4xNjc5NjkgMTYgMTZzLTcuMTY3OTY5IDE2LTE2IDE2em0wIDAiIGZpbGw9IiMwMDAwMDAiIGRhdGEtb3JpZ2luYWw9IiMwMDAwMDAiPjwvcGF0aD48cGF0aCB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGQ9Im0zNjggMzJoLTM1MmMtOC44MzIwMzEgMC0xNi03LjE2Nzk2OS0xNi0xNnM3LjE2Nzk2OS0xNiAxNi0xNmgzNTJjOC44MzIwMzEgMCAxNiA3LjE2Nzk2OSAxNiAxNnMtNy4xNjc5NjkgMTYtMTYgMTZ6bTAgMCIgZmlsbD0iIzAwMDAwMCIgZGF0YS1vcmlnaW5hbD0iIzAwMDAwMCI+PC9wYXRoPjxwYXRoIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZD0ibTM2OCAyNzcuMzMyMDMxaC0zNTJjLTguODMyMDMxIDAtMTYtNy4xNjc5NjktMTYtMTZzNy4xNjc5NjktMTYgMTYtMTZoMzUyYzguODMyMDMxIDAgMTYgNy4xNjc5NjkgMTYgMTZzLTcuMTY3OTY5IDE2LTE2IDE2em0wIDAiIGZpbGw9IiMwMDAwMDAiIGRhdGEtb3JpZ2luYWw9IiMwMDAwMDAiPjwvcGF0aD48L2c+PC9zdmc+" />
</i>
</label>
<ul class="main-menu">
<li class="menu-item"><a href="/">Inicio</a></li>
<li class="menu-item"><a href="/">Notros</a></li>
<li class="menu-item"><a href="/">Carta</a></li>
<li class="menu-item"><a href="/">Blog</a></li>
<li class="menu-item"><a id="nav-main-contact" href="/">Contacto</a></li>
</ul>
</nav>
</div>
</div>
</header>
<div class="hero"></div>
</body>
</html>
Si quieres usar el mismo icono hamburguesa solo has de copiar la imagen en svg que hay entre las etiquetas <i></i>. Simplemente copia desde el principio de la etiqueta de la imagen <img hasta el cierre de la misma />.
CSS de encabezado de página web de restaurante
Una vez tengamos la estructura HTML pasaremos a maquetar el diseño de la cabecera de nuestro restaurante con CSS. Crearemos todos los estilos en la hoja que hemos creado “style.css”.
Primero y para olvidarnos del tema, realizaremos los estilos del apartado de hero. Que realmente, son 3 propiedades que usaremos con la clase .hero.
/* Hero */
.hero{
background: url(img/hero-front-page-bg.jpg) center;
background-size: cover;
height: 100vh;
}
Luego pasaremos al apartado de la cabecera, junto con el menú de navegación.
/* Menu Header Restaurante */
header.main-header{
position: fixed;
top: 0;
width: 100%;
z-index: 9999;
}
.header-wrap{
display: flex;
justify-content: space-between;
padding: 1rem;
background-color: #fff;
z-index: 999;
}
.wrap-logo-header{
display: flex;
align-items: center;
flex-basis: 15%;
}
.logo-header{
font-weight: bold;
font-size: 1.2rem;
color: #222;
}
.nav-header{
display: flex;
align-items: center;
width: 100%;
}
.nav-wrap-header{
display: flex;
flex-basis: 50%;
}
ul.main-menu{
display: flex;
width: 100%;
z-index: 99;
margin: 0;
padding: 0;
justify-content: space-between;
font-size: 1.1rem;
}
ul.main-menu #nav-main-contact{
display: flex;
align-items: center;
padding: .5rem 1rem;
background-color: #FFC300;
color: #fff;
}
li.menu-item{
margin: .75rem;
display: flex;
}
li.menu-item a{
padding: .5rem 1rem;
color: #222;
}
li.menu-item a:hover{
color: #FFC300;
}
i.toggle-menu{
display: none;
background-color: #fff;
border: none;
z-index: 9999;
}
i.toggle-menu img{
width: 27px;
z-index: 99;
}
input#check{
display: none;
}
Si te fijas, usamos display: flex; en casi todos los envoltorios para colocar de una manera sencilla donde queremos que se muestre.
Convertir encabezado responsive con CSS (media queries)
Y ahora pasaremos a la parte final, donde convertimos nuestra cabecera fija en responsive. De esta manera, tendremos un menú completamente responsive que se va a adaptar a cualquier tipo de pantalla o dispositivo.
Para ello usaremos un par de media queries, un min-width de 880px y otro max-width de 768px. Con estas dos media queries ya tenemos suficiente para englobar todos los estilos que queremos que se apliquen cuando la pantalla cambie de tamaño (mayor de 880px y menor a 768px).
@media (min-width:880px){
.header-wrap{
padding: .5rem 5rem;
}
}
@media (max-width:768px){
header{
margin-bottom: 4rem;
}
.header-wrap{
position: fixed;
width: 100%;
background-color: #fff;
padding: 0;
top: 0;
z-index: 9999;
height: 60px;
}
.wrap-logo-header{
position: fixed;
z-index: 999;
top: 3%;
left: 3%;
}
i.toggle-menu{
display: flex;
}
ul.main-menu,#nav-main-contact{
display: none;
left: 0;
margin: 0;
padding: 0;
}
ul.main-menu{
position: fixed;
background-color: #fff;
}
label.checkbtn{
position: fixed;
right: 3%;
top: 3%;
z-index: 9999;
}
#check:checked ~ ul{
display: flex;
z-index: 9;
flex-flow: column;
align-items: center;
justify-content: center;
height: 100vh;
top: 0;
font-size: 2rem;
}
}
Usamos el selector “#check:checked ~ ul” para convertir nuestro menú desplegable cada vez que hagamos click en el botón. Y por el contrario, se va a contraer cada vez que no esté seleccionado.
Y hasta aquí el tutorial donde explicamos como crear un Encabezado nuestra página web de un restaurante y lo convertimos en responsive. En el próximo post veremos como hacer un pie de página o footer para nuestro restaurante.
Ya sabes que dispones de los comentarios (del blog y de los vídeos de Youtube) para preguntar lo que quieras.