En el siguiente tutorial, o código de ejemplo, podéis trabajar con un completo menú Responsive Design que se adapta tanto a escritorio como smartphone. Trabaja de diferente forma dependiendo del contexto. Cuando se encuentra en una resolución reducida podrás visualizar un botón hamburguesa que despliega un menú a pantalla completa del navegador. Mientras que en escritorio se ensancha ocupando todo el espacio disponible, colocando el logo a la izquierda y el navegador a la derecha en dirección horizontal.
Me he despreocupado de el aspecto visual porque busco dar una plantilla rápida para integrar. Además he insertado comentarios para que se pueda entender todos los detalles.
HTML5
Siguiendo un buen orden y usando etiquetas de contenido como <header> o <nav> y una lista desordenada para estructurar el menú, se construye la base en la cual trabajaremos con el CSS más adelante.
Adicionalmente, y siempre de manera opcional, se ha añadido un minimalista framework de JavaScript, AlpineJS en este caso, para gestionar los eventos. Tenemos 2 clics en móvil/celular: abrir menú y cerrar menú. Puedes usar JavaScript plano si tienes cierta experiencia.
<!-- AlpineJS para gestionar el evento Clic -->
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
<!-- Header -->
<header x-data="{ open: false }" class="header">
<!-- Logo -->
<div class="header__logo">
Logo
</div>
<!-- Boton abrir -->
<button class="header__button-nav--open" x-on:click="open = true">Abrir</button>
<!-- Navegador -->
<nav class="nav" x-bind:class="open ? 'nav--show' : ''">
<!-- Boton cerrar -->
<div class="nav__button" x-on:click="open = false">
<button class="header__button-nav--close">Cerrar</button>
</div>
<!-- Menu -->
<ul class="nav__ul">
<li class="nav__item"><a href="#" class="nav__link">Lorem.</a></li>
<li class="nav__item"><a href="#" class="nav__link">Nulla.</a></li>
<li class="nav__item"><a href="#" class="nav__link">Ut.</a></li>
<li class="nav__item"><a href="#" class="nav__link">Doloremque.</a></li>
</ul>
</nav>
<!-- Fin Navegador -->
</header>
<!-- Fin Header -->
CSS3
Hay que diferenciar entre los estilos que usaremos en resoluciones reducidas o escritorio. En el ejemplo se usa un corte a los 700px, pero puede ser cambiado por cualquier otra que necesitemos.
/* Estilos comunes */
.header {
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
top: 0;
left: 0;
right: 0;
background: #2aacb8;
padding: 1rem;
}
/* Estilos móvil/celular */
@media all and (max-width: 700px) {
/* Oculta el nav en la parte izquiera */
.nav {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: red;
transform: translateX(-100vw);
transition: 0.5s;
}
/* Muestra el nav */
.nav--show {
transform: translateX(0);
}
.nav__button {
text-align: right;
margin: 1rem;
}
.nav__ul {
list-style: none;
padding: 0;
margin: 0;
}
.nav__link {
display: block;
padding: 1rem;
font-size: 1.5rem;
text-align: center;
text-decoration: none;
color: black;
}
}
/* Estilos Escritorio */
@media all and (min-width: 701px) {
/* Oculta botón de abrir o cerrar */
.nav__button,
.header__button-nav--open {
display: none;
}
/* Adapta el nav en horizontal */
.nav__ul {
display: flex;
list-style: none;
padding: 0;
}
.nav__link {
display: block;
padding: 0.5rem 1rem;
text-decoration: none;
color: black;
transition: 0.5s;
}
.nav__link:hover {
opacity: 0.5;
}
}
Completo
Si desconocéis donde se debe situar cada elemento, dejo a continuación una versión unificada.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
<style>
/* Estilos comunes */
.header {
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
top: 0;
left: 0;
right: 0;
background: #2aacb8;
padding: 1rem;
}
/* Estilos móvil/celular */
@media all and (max-width: 700px) {
/* Oculta el nav en la parte izquiera */
.nav {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: red;
transform: translateX(-100vw);
transition: 0.5s;
}
/* Muestra el nav */
.nav--show {
transform: translateX(0);
}
.nav__button {
text-align: right;
margin: 1rem;
}
.nav__ul {
list-style: none;
padding: 0;
margin: 0;
}
.nav__link {
display: block;
padding: 1rem;
font-size: 1.5rem;
text-align: center;
text-decoration: none;
color: black;
}
}
/* Estilos Escritorio */
@media all and (min-width: 701px) {
/* Oculta botón de abrir o cerrar */
.nav__button,
.header__button-nav--open {
display: none;
}
/* Adapta el nav en horizontal */
.nav__ul {
display: flex;
list-style: none;
padding: 0;
}
.nav__link {
display: block;
padding: 0.5rem 1rem;
text-decoration: none;
color: black;
transition: 0.5s;
}
.nav__link:hover {
opacity: 0.5;
}
}
</style>
</head>
<body>
<!-- Header -->
<header x-data="{ open: false }" class="header">
<!-- Logo -->
<div class="header__logo">
Logo
</div>
<!-- Boton abrir -->
<button class="header__button-nav--open" x-on:click="open = true">Abrir</button>
<!-- Navegador -->
<nav class="nav" x-bind:class="open ? 'nav--show' : ''">
<!-- Boton cerrar -->
<div class="nav__button" x-on:click="open = false">
<button class="header__button-nav--close">Cerrar</button>
</div>
<!-- Menu -->
<ul class="nav__ul">
<li class="nav__item"><a href="#" class="nav__link">Lorem.</a></li>
<li class="nav__item"><a href="#" class="nav__link">Nulla.</a></li>
<li class="nav__item"><a href="#" class="nav__link">Ut.</a></li>
<li class="nav__item"><a href="#" class="nav__link">Doloremque.</a></li>
</ul>
</nav>
<!-- Fin Navegador -->
</header>
<!-- Fin Header -->
</body>
</html>
Extra: en SASS
Si usáis un generador como SASS, os dejo una replica adaptada de los estilos.
/* Estilos comunes
.header
display: flex
justify-content: space-between
align-items: center
position: fixed
top: 0
left: 0
right: 0
background: #2aacb8
padding: 1rem
/* Estilos móvil/celular
@media all and (max-width: 700px)
/* Oculta el nav en la parte izquiera
.nav
position: fixed
top: 0
left: 0
right: 0
bottom: 0
background: red
transform: translateX(-100vw)
transition: 0.5s
/* Muestra el nav
&--show
transform: translateX(0)
&__button
text-align: right
margin: 1rem
&__ul
list-style: none
padding: 0
margin: 0
&__link
display: block
padding: 1rem
font-size: 1.5rem
text-align: center
text-decoration: none
color: black
/* Estilos Escritorio
@media all and (min-width: 701px)
/* Oculta botón de abrir o cerrar
.nav__button, .header__button-nav--open
display: none
/* Adapta el nav en horizontal
.nav
&__ul
display: flex
list-style: none
padding: 0
&__link
display: block
padding: 0.5rem 1rem
text-decoration: none
color: black
transition: 0.5s
&:hover
opacity: 0.5
Espero que os sea de ayuda.
{{ comments.length }} comentarios