A continuación te voy a explicar como adaptar un menú de navegación a todos los dispositivos y hacerlo completamente responsive. Vamos a convertir el menú de navegación en HTML y CSS que vimos anteriormente a través de las media queries.
Si no has visto el vídeo anterior donde explico como hacer el menú en HTML y CSS (de forma fácil) te aconsejo que le eches un vistazo para poder seguir el tutorial sin problemas.
Y ahora vamos con el tutorial. Por si te da un poco de palo leerlo todo, te dejo el vídeo por aquí.
Recuerda que voy a dejar todo el código un poco más abajo, si te pierdes, siempre puedes echarle un vistazo.
Menú de navegación en HTML
En el anterior vídeo hicimos todo el menú en HTML. Pero lo dejaré por aquí por si hay algún despistado o acabas de aterrizar en este post.
<header class="header">
<div class="logo-header">
<a href=""><img src="img/Dropcoding.svg" alt=""></a>
</div>
<div class="nav-menu">
<input type="checkbox" id="check">
<label for="check" class="checkbtn">
<i class="menu-icon"><img src="img/menu.svg" alt=""></i>
</label>
<ul>
<li><a href="">Inicio</a></li>
<li><a href="/quien-soy.html">Quien Soy</a></li>
<li><a href="">Servicios</a></li>
<li><a href="">Contacto</a></li>
</ul>
</div>
</header>Como ves creamos la etiqueta header y usamos cajas o divs para envolver el logo y el propio menú de navegación.
Menú de navegación en CSS
Ahora tocaría la parte de maquetación con CSS del menú, pero también lo tenemos hecho. Lo dejo a continuación por si quieres echarle un vistazo.
header{
background-color: #222;
color: #fff;
display: flex;
justify-content: space-between;
align-items: center;
padding: .5rem 2rem;
}
.logo-header img{
width: 50px;
}
.nav-menu ul{
display: flex;
align-items: center;
}
.nav-menu li{
margin-right: 1rem;
}
.nav-menu a{
color: #fff;
}
.nav-menu li:last-child{
background:#4ad295;
padding: .25rem .75rem;
border-radius: .2rem;
}
.menu-icon img{
width: 30px;
height: 30px;
border-radius: 2px;
}
.menu-icon, #check{
display: none;
}
Como puedes observar, hemos maquetado el menú para dispositivos grandes o ordenadores y a continuación, con las media queries vamos a hacer el diseño adaptado o responsive.
Menú Responsive con Media Queries
Trabajaremos con las mismas clases y utilizaremos un pequeño truco en CSS para hacer el menú desplegable. De hecho, es tan fácil como utilizar la propiedad «checked» para que cada vez que le demos click al elemento se abra o se cierre. No te preocupes, esto puede ser un poco confuso al principio, pero como veremos a continuación es bastante sencillo de hacer.
@media (max-width:768px){
.checkbtn{
display: block;
}
.menu-icon{
display: block;
position: fixed;
top: 20px;
right: 20px;
cursor: pointer;
}
.nav-menu ul{
display: block;
position: fixed;
top:70px;
left:-100%;
background: #222;
width: 100%;
height: 100vh;
right: 0;
}
.nav-menu ul li{
padding: 2rem;
display: flex;
justify-content: center;
margin: 0;
}
.nav-menu ul li:last-child{
background: none;
padding: 1rem;
}
#check:checked ~ ul{
left: 0;
transition: all .25s;
}
}Y con estas lineas de código ya tendríamos nuestro menú responsive.
Si quieres que el menú hamburguesa aparezca en pantallas más grandes o más pequeñas, simplemente tienes que cambiar el valor de la media querie, donde aparece «@media (max-width:768px)».
Espero que te haya gustado esta manera de hacer un menú responsive en HTML y CSS y recuerda que si tienes cualquier duda o sugerencia puedes dejármela en los comentarios.