Los patrones “fuera del lienzo” son diferentes formas de abordar el diseño donde el contenido de la web no se presenta simplemente en una columna vertical. Por ejemplo, la navegación podría ocultarse en el borde izquierdo del “lienzo” (ventana visible del navegador) y deslizarse a pedido. Anthony Colangelo creó jPanelMenu para hacer precisamente eso. Meny de Hakim El Hattab es más elegante pero similar en lo que logra.
Ambos usan JavaScript. Pensé que sería divertido intentar recrear el jPanelMenu de Anthony usando solo CSS. Es factible, con varias ventajas y desventajas.
Ver demostración
Dos columnas, una colapsada
La técnica de diseño aquí es esencialmente una cuadrícula de dos columnas. Solo la columna de la izquierda tiene un ancho del 0 % y la columna de la derecha tiene un ancho del 100 % de forma predeterminada. La columna de la izquierda es la navegación que pretendemos revelar según sea necesario. Con desbordamiento oculto, esta columna está completamente oculta.
<!-- I am collapsed by default -->
<nav id="main-navigation" class="navigation">
<a href="https://css-tricks.com/off-canvas-menu-with-css-target/#">Nav Links</a>
<!-- more -->
</nav>
<!-- I am full width by default -->
<div class="page-wrap">
<header>
<a href="https://css-tricks.com/off-canvas-menu-with-css-target/#main-navigation">Menu</a>
<h1>Title</h1>
</header>
<!-- content -->
</div>.navigation {
/* Collapsed */
width: 0;
overflow: hidden;
position: fixed;
top: 0;
left: 0;
height: 100%;
}
.page-wrap {
width: 100%;
float: right;
}Abrir menú Estado con :objetivo
Tenga en cuenta que este enlace:
<a href="https://css-tricks.com/off-canvas-menu-with-css-target/#main-navigation">Menu</a>Coincide con el ID de:
<nav id="main-navigation" class="navigation">Ese es un viejo enlace hash regular. La página “saltará” a ese elemento. Más importante para nosotros, hará que este selector coincida:
#main-navigation:target {
}Entonces, cuando se hace clic en ese enlace, podemos mostrar el menú aumentando su ancho. También podría hacer que se deslice bien.
.navigation {
transition: width 0.3s ease;
}
#main-nav:target {
width: 20%;
}Podríamos dejarlo así, y el menú se superpondría al contenido (asegúrese de que tenga un índice z más alto). Eso estaría perfectamente bien. Pero tenemos opciones. En su lugar, podríamos “empujar” el contenido fuera del borde derecho del contenido. Eso es lo que, por ejemplo, hace Facebook en su aplicación móvil cuando se revela el menú de la izquierda. O podríamos aplastar el contenido principal creando una cuadrícula de 20%/80%. Eso es lo que haremos aquí.
Pero espera… ¿cómo seleccionamos .page-wrap solo en el estado particular cuando el menú está abierto? ¡Podemos usar un combinador de hermanos adyacentes!
#main-nav:target + .page-wrap {
width: 80%;
}Es fácil.
Para cerrar el menú, solo necesitamos eliminar el enlace hash en la URL. Esencialmente, proporcione un enlace como este en cualquier lugar:
<a href="https://css-tricks.com/off-canvas-menu-with-css-target/#">Close Menu</a>Si quisiera ser realmente elegante, podría ocultar/mostrar diferentes enlaces colocados exactamente en el mismo lugar para crear un “enlace de alternancia”.
Ventajas
¡Todo es CSS! Menos código en general. Menos recursos para cargar. Funciona sin JavaScript. Transición más suave que la transición de JavaScript.
Desventajas
Soporte de navegador limitado. :target es IE9+ (todo falla si :target no funciona). Las transiciones son IE 10+. Cambiar clases u ocultar/mostrar/animar con JavaScript puede superar cualquier limitación del navegador. También tendrá más libertad en la forma en que se puede organizar el marcado en lugar de verse obligado a seguir el orden específico que se presenta aquí. También posiblemente una semántica ligeramente mejor, sin necesidad de enlaces separados para abrir y cerrar el menú.