Cómo crear un menú fuera del lienzo (off-canvas) con CSS y un toque de JavaScript

Spanish (Español) translation by Carlos (you can also view the original English article)

En este tutorial veremos un método simple, pero efectivo, para crear un menú fuera del lienzo (off-canvas) con HTML, CSS y JavaScript.

Para tener una idea inicial de lo que vamos a crear, mira la demostración en CodePen (revisa la versión más grande para una mejor experiencia):

Please accept marketing cookies to load this content.

Nota: Este tutorial no se enfocará en cómo hacer que el menú fuera del lienzo sea accesible o responsivo, por lo que esos serían, sin duda, los siguientes pasos válidos.

1. Inicia con el marcado

Nuestro marcado consiste en dos elementos de envoltura:

el elemento .top-banner
el elemento .top-nav

Aquí está el código HTML:

<section class="top-banner">
  <div class="top-banner-overlay">
    <!-- content here -->
  </div>
</section>

<nav class="top-nav">
  <div class="menu-wrapper">
    <!-- content here -->
  </div>
  <div class="fixed-menu">
    <!-- content here -->
  </div>
</nav>

2. A continuación necesitamos algo de CSS

Con el marcado preparado, a continuación examinemos los estilos más importantes que se requieren para nuestro menú.

Nota: En aras de la legibilidad, este código CSS no está optimizado, notarás propiedades duplicadas que quizá quieras eliminar en tu propia versión.

Estilizando el elemento top-banner

El elemento .top-banner se ve así:

En torno a sus estilos, hacemos lo siguiente:

Ajusta su ancho igual al ancho de la ventana menos el ancho del elemento .menu-wrapper.
Ajusta su altura igual a la altura de la ventana.
Defínelo como un contenedor flexible. Esto forzará a su superposición para que cubra toda la altura del elemento principal.
Usa flexbox para centrar de manera vertical el contenido de la superposición.

Aquí están los estilos que necesitaremos para lograr todo eso:

.top-banner {
  display: flex;
  width: calc(100% - 150px);
  height: 100vh;
  transform: translateX(150px);
  background: url(IMAGE_PATH) no-repeat center / fixed;
}

.top-banner-overlay {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 350px;
  padding: 20px;
  transition: transform .7s;
  color: white;
  background: rgba(0, 0, 0, .7);
}

Estilizando al elemento top-nav

El elemento .top-nav se ve así:

En este caso, haremos lo siguiente:

Especificamos los elementos secundarios directos como elementos fijos que cubren la altura de la ventana.
Utilizamos flexbox para alinear verticalmente el elemento .fixed-menu.
De manera predeterminada, ocultamos el elemento .menu-wrapper. Para hacerlo, no le damos un valor de propiedad como display: none. De hecho, usamos la función translate () para moverlo 200 px hacia la izquierda. Recuerda que el ancho del elemento es de 350 px, por lo que parte de él todavía está dentro de la ventana gráfica. No obstante, no es visible porque el elemento está posicionado debajo del elemento .fixed-menu.
Ocultamos la lista del menú.

Mira los estilos CSS correspondientes a continuación:

.top-nav .menu-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 350px;
  padding: 20px;
  transform: translateX(-200px);
  transition: transform .7s;
  background: #B1FFE5;
}

.top-nav .menu-wrapper .menu {
  opacity: 0;
  transition: opacity .4s;
}

.top-nav .fixed-menu {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  width: 150px;
  padding: 20px;
  background: aquamarine;
}

3. Ahora algo de JavaScript

En este punto, utilizaremos un sencillo código de JavaScript para manipular el estado del menú fuera del lienzo.

Describamos las acciones necesarias:

Cuando se hace clic en el botón .menu-open, el menú debe aparecer con un agradable efecto deslizante hacia dentro y, simultáneamente, la superposición debe ser empujada hacia la derecha. De forma opcional, podemos hacer muchas más cosas durante este estado. En nuestro ejemplo, añadimos una sombra al seudoelemento ::before de la superposición y revelamos la lista del menú usando un efecto de desvanecimiento.
Cuando se hace clic en el botón .menu-close, el menú debería desaparecer con un agradable efecto deslizante hacia fuera y, simultáneamente, la superposición debe ser empujada hacia la izquierda.

Aquí está el código JavaScript que implementa este comportamiento:

const menuOpen = document.querySelector(".top-nav .menu-open");
const menuClose = document.querySelector(".top-nav .menu-close");
const menuWrapper = document.querySelector(".top-nav .menu-wrapper");
const topBannerOverlay = document.querySelector(".top-banner-overlay");

function toggleMenu() {
  menuOpen.addEventListener("click", () => {
    menuWrapper.classList.add("is-opened");
    topBannerOverlay.classList.add("is-moved");
  });
  
  menuClose.addEventListener("click", () => {
    menuWrapper.classList.remove("is-opened");
    topBannerOverlay.classList.remove("is-moved");
  });
}

toggleMenu();

Y en seguida encontrarás los estilos CSS asociados:

.top-banner-overlay.is-moved {
  transform: translateX(350px);
}

.top-banner-overlay.is-moved::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 100%;
  width: 20px;
  box-shadow: 0 0 10px black;
}

.top-nav .menu-wrapper.is-opened {
  transform: translateX(150px);
}

.top-nav .menu-wrapper.is-opened .menu {
  opacity: 1;
  transition-delay: .6s;
}

4. Compatibilidad con navegadores

Esta demostración funcionará bien únicamente en los navegadores de escritorio. Los dispositivos móviles requerirán un diseño de página diferente, pero eso está fuera del alcance de este tutorial. Como siempre, utilizamos Babel para compilar el código ES6 a ES5.

El único pequeño problema que encontré mientras lo probaba es el cambio en la representación del texto que ocurre cuando se anima la superposición. Aunque probé varios enfoques propuestos en diferentes hilos de Stack Overflow, no pude hallar una solución simple para todos los sistemas operativos y navegadores. Así que ten presente que quizá veas problemas de representación (rendering) de las fuentes pequeñas mientras se anima la superposición.

Conclusión

¡Eso es todo, amigos! Logramos crear un útil menú fuera del lienzo con un código relativamente sencillo.

Espero que hayas disfrutado el resultado final y que lo uses como inspiración para crear menús fuera del lienzo aún más potentes. Y por supuesto, si creas alguno, ¡no olvides compartirlo con nosotros!