Según nos vamos adaptado a los móviles, nos resulta más cómodo tener la misma interfaz en otros dispositivos. Insconscientemente buscamos una homogeneidad en usabilidad. Y por ello se hace cada vez más común imitar los menús responsive design al escritorio. En el siguiente ejemplo podrás ver un menú para smartphone sin nada de Javascript. Solo la magia de HTML y CSS.
DEMO
HTML
<!-- Definimos nuestra cabecera -->
<header>
<!-- Nuestro botón. En el ejemplo uso Font-awesome para mostrar un icono de barras -->
<button class="botonMenu">
<i class="fa fa-bars"></i>
</button>
<!-- Los links -->
<nav class="principal">
<ul>
<li><a href="#">Lorem.</a></li>
<li><a href="#">Soluta!</a></li>
<li><a href="#">Reprehenderit.</a></li>
<li><a href="#">Nulla!</a></li>
<li><a href="#">Ipsum.</a></li>
</ul>
</nav>
</header>
CSS
/* Boton de menu */
.botonMenu {
display: flex;
justify-content: center;
align-items: center;
width: 3rem;
height: 3rem;
position: fixed;
top: 1rem;
right: 1rem;
background-color: #99B2B7;
border: 0;
color: white;
cursor: pointer;
}
/* Se le quita el borde azul cuando se pulsa en Chrome */
.botonMenu:focus {
outline: none;
}
/* Cuando es pulsado, se quita el translate que lo ocultaba */
.botonMenu:focus + .principal {
transform: translateX(0rem);
}
/* Se posiciona y se oculta con translate */
nav.principal {
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: 15rem;
background-color: #7A6A53;
transform: translateX(15rem);
transition: 1s all;
}
/* Estilos sencillos para decorar los links */
nav.principal ul {
margin: 0;
padding: 0;
list-style: none;
}
nav.principal a {
display: block;
color: #D5DED9;
padding: 1rem;
transition: .5s all;
}
nav.principal a:hover {
text-decoration: none;
background-color: #948C75;
}
Todo agrupado y sin comentarios
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.botonMenu {
display: flex;
justify-content: center;
align-items: center;
width: 3rem;
height: 3rem;
position: fixed;
top: 1rem;
right: 1rem;
background-color: #99B2B7;
border: 0;
color: white;
cursor: pointer;
}
.botonMenu:focus {
outline: none;
}
.botonMenu:focus + .principal {
transform: translateX(0rem);
}
nav.principal {
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: 15rem;
background-color: #7A6A53;
transform: translateX(15rem);
transition: 1s all;
}
nav.principal ul {
margin: 0;
padding: 0;
list-style: none;
}
nav.principal a {
display: block;
color: #D5DED9;
padding: 1rem;
transition: .5s all;
}
nav.principal a:hover {
text-decoration: none;
background-color: #948C75;
}
</style>
</head>
<body>
<header>
<button class="botonMenu">
<i class="fa fa-bars"></i>
</button>
<nav class="principal">
<ul>
<li><a href="#">Lorem.</a></li>
<li><a href="#">Soluta!</a></li>
<li><a href="#">Reprehenderit.</a></li>
<li><a href="#">Nulla!</a></li>
<li><a href="#">Ipsum.</a></li>
</ul>
</nav>
</header>
</body>
</html>
Actualización
Dispones de otros ejemplos de menús con otras configuraciones.
- Menú completo Responsive Design para Escritorio y Móvil/Celular.
- Menú desplegable con subcategorias.
{{ comments.length }} comentarios