Mostrar menú por animación de rotación de página | Programar Plus

Hay muchos enfoques diferentes para los menús en los sitios web. Algunos menús son persistentes, siempre a la vista y muestran todas las opciones. Otros menús están ocultos por diseño y deben abrirse para ver las opciones. E incluso hay enfoques adicionales sobre cómo los menús ocultos revelan sus elementos de menú. Algunos vuelan y superponen el contenido, otros lo alejan y otros hacen algún tipo de trato de pantalla completa.

Cualquiera que sea el enfoque, todos tienen sus pros y sus contras, y el correcto depende de la situación en la que se esté utilizando. Francamente, me suelen gustar los menús desplegables en general. No en todos los casos, por supuesto. Pero cuando busco un menú que sea tacaño en bienes raíces y de fácil acceso, son difíciles de superar.

Lo que no me gusta de ellos es la frecuencia con la que entran en conflicto con el contenido de la página. Un menú desplegable, en el mejor de los casos, oculta el contenido y, en el peor, lo elimina por completo de la interfaz de usuario.

Intenté adoptar otro enfoque. Tiene la persistencia y disponibilidad de una posición fija, así como los atributos de ahorro de espacio de un menú oculto que sale volando, solo sin eliminar al usuario del contenido actual de la página.

Así es como lo hice.

La palanca

Estamos creando un menú que tiene dos estados, abierto y cerrado, y alterna entre los dos. Aquí es donde entra en juego el Checkbox Hack. Es perfecto porque una casilla de verificación tiene dos estados interactivos comunes, marcado y no marcado (también está el indeterminado), que se pueden usar para activar esos estados.

La casilla de verificación está oculta y se coloca debajo del icono de menú con CSS, por lo que el usuario nunca la ve aunque interactúe con ella. Al marcar la casilla (o, ejem, el ícono del menú) se revela el menú. Al desmarcarlo, se oculta. Simple como eso. ¡Ni siquiera necesitamos JavaScript para hacer el levantamiento!

Por supuesto, Checkbox Hack no es la única forma de hacer esto, y si desea alternar una clase para abrir y cerrar el menú con JavaScript, está absolutamente bien.

Es importante que la casilla de verificación preceda al contenido principal en el código fuente, porque el :checked selector que vamos a escribir en última instancia para que esto funcione necesita usar un selector hermano. Si eso le causa problemas de diseño, use Grid o Flexbox para sus diseños, ya que son independientes del orden de origen, como la forma en que usé su ventaja para contar en CSS.

El estilo predeterminado de la casilla de verificación (agregado por el navegador) se elimina, usando el appearance Propiedad CSS, antes de agregar su pseudo elemento con el icono de menú para que el usuario no vea el cuadrado de la casilla de verificación.

Primero, el marcado básico:

<input type="checkbox"> 
<div id="menu">
  <!--menu options-->
</div>
<div id="page">
  <!--main content-->
</div>

… y el CSS de referencia para el Checkbox Hack y el icono de menú:

/* Hide checkbox and reset styles */
input[type="checkbox"] {
  appearance: initial; /* removes the square box */
  border: 0; margin: 0; outline: none; /* removes default margin, border and outline */
  width: 30px; height: 30px; /* sets the menu icon dimensions */
  z-index: 1;  /* makes sure it stacks on top */
} 


/* Menu icon */
input::after {
  content: "2255";
  display: block; 
  font: 25pt/30px "georgia"; 
  text-indent: 10px;
  width: 100%; height: 100%;
} 


/* Page content container */
#page {
  background: url("earbuds.jpg") #ebebeb center/cover;
  width: 100%; height: 100%;
}

Arrojé los estilos para el #page contenido también, que será una imagen de fondo de tamaño completo.

La transición

Suceden dos cosas cuando se hace clic en el control del menú. Primero, el icono del menú cambia a una marca ×, simbolizando que se puede hacer clic en él para cerrar el menú. Entonces, seleccionamos el ::after pseudo elemento de entrada de casilla de verificación cuando la entrada está en un :checked Expresar:

input:checked::after {
  content: "0d7"; /* changes to × mark */
  color: #ebebeb;
}

En segundo lugar, el contenido principal (nuestra imagen de “auriculares”) se transforma, revelando el menú que se encuentra debajo. Se mueve hacia la derecha, gira y se escala hacia abajo, y sus esquinas del lado izquierdo se vuelven angulares. Esto es para dar la apariencia de que el contenido está siendo empujado hacia atrás, como una puerta que se abre.

input:checked ~ #page { 
  clip-path: polygon(0 8%, 100% 0, 100% 100%, 0 92%);
  transform: translateX(40%) rotateY(10deg) scale(0.8); 
  transform-origin: right center; 
  transition: all .3s linear;
} 

solía clip-path para cambiar las esquinas de la imagen.

Dado que estamos aplicando una transición en las transformaciones, necesitamos una inicial clip-path valor en el #page así que hay algo de lo que hacer la transición. También soltaremos una transición en #page mientras estamos en eso porque eso permitirá que se cierre tan suavemente como se abra.

#page {
  background: url("earbuds.jpeg") #ebebeb center/cover; 
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  transition: all .3s linear;
  width: 100%; height: 100%;
}

Básicamente, hemos terminado con el diseño y el código centrales. Cuando la casilla de verificación no está marcada (al hacer clic en la marca ×), la transformación en la imagen del auricular se deshará automáticamente y volverá al frente y al centro.

Una pizca de JavaScript

Aunque tenemos lo que estamos buscando, todavía hay una cosa más que le daría un buen impulso en el departamento de UX: cierre el menú al hacer clic (o tocar) el #page elemento. De esa manera, el usuario no necesita buscar o incluso usar la marca × para volver al contenido.

Dado que esta es simplemente una forma adicional de ocultar el menú, podemos usar JavaScript. ¿Y si JavaScript está deshabilitado por alguna razón? No es gran cosa. Es solo una mejora que no impide que el menú funcione sin él.

document.querySelector("#page").addEventListener('click', (e, checkbox = document.querySelector('input')) => { 
  if (checkbox.checked) { checkbox.checked = false; e.stopPropagation(); }
});

Lo que hace esta línea de tres líneas es agregar un controlador de eventos de clic sobre el #page elemento que desmarca la casilla de verificación si la casilla de verificación está en un :checked estado, que cierra el menú.

Hemos estado viendo una demostración hecha para un diseño vertical / retrato, pero funciona igual de bien en tamaños de pantalla horizontal más grandes, según el contenido con el que trabajemos.

Este es solo un enfoque o una versión del típico menú desplegable. La animación abre muchas posibilidades y probablemente haya docenas de otras ideas que pueda tener en mente. De hecho, me encantaría escucharlos (o mejor aún, verlos), ¡así que por favor compártelos!