Menú revelado por animación de rotación de página

1. la palanca
2. La transición
3. Una pizca de JavaScript

Hay muchos enfoques diferentes para los menús en los sitios web. Algunos menús son persistentes, siempre están a la vista y muestran todas las opciones. Otros menús están ocultos por diseño y es necesario abrirlos para ver las opciones. E incluso existen enfoques adicionales sobre cómo los menús ocultos revelan sus elementos de menú. Algunos salen volando y se superponen al contenido, otros lo alejan y otros harán 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 utilice. Francamente, me suelen gustar los menús desplegables en general. No para 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, oscurece 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 aparece, solo sin sacar 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 desmarcado (también está el indeterminado )) que se pueden usar para activar esos estados.

La casilla de verificación está oculta y colocada debajo del ícono del menú con CSS, por lo que el usuario nunca la ve aunque interactúe con ella. Al marcar la casilla (o, ejem , el ícono de menú), se revela el menú. Desmarcarlo lo oculta. Simple como eso. ¡Ni siquiera necesitamos JavaScript para realizar 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 :checkedselector que finalmente escribiremos para que esto funcione necesita usar un selector hermano. Si eso le causa preocupaciones sobre el diseño, use Grid o Flexbox para sus diseños, ya que son independientes del orden de origen, como usé su ventaja para contar en CSS .

El estilo predeterminado de la casilla de verificación (agregado por el navegador) se elimina mediante la appearancepropiedad CSS, antes de agregar su pseudoelemento con el ícono 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 !--menu options--/divdiv !--main content--/div

…y el CSS básico para el Checkbox Hack y el ícono 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%;}

También agregué los estilos para el #pagecontenido, que será una imagen de fondo de tamaño completo.

La transición

Suceden dos cosas cuando se hace clic en el control de menú. Primero, el ícono del menú cambia a una marca ×, lo que simboliza que se puede hacer clic en él para cerrar el menú. Entonces, seleccionamos el ::afterpseudo elemento de la entrada de la casilla de verificación cuando la entrada está en un :checkedestado: Museos y arte en España

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

En segundo lugar, el contenido principal (la imagen de nuestros “auriculares”) se transforma y revela el menú que se encuentra debajo. Se mueve hacia la derecha, gira y se reduce, 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​​cambiar las esquinas de la imagen.

Dado que estamos aplicando una transición en las transformaciones, necesitamos un clip-pathvalor inicial en #pagepara que haya algo desde lo cual realizar la transición. También colocaremos una transición #pagemientras estamos en ello porque eso permitirá que se cierre tan suavemente como se abre.

#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 principales. 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: cerrar el menú al hacer clic (o tocar) el #pageelemento. De esa manera, el usuario no necesita buscar ni utilizar 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 algún motivo? No es gran cosa. Es sólo una mejora que no impide que el menú funcione sin ella.

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 #pageelemento que desmarca la casilla de verificación si la casilla de verificación está en un :checkedestado 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 horizontales más grandes, dependiendo del contenido con el que estemos trabajando.

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 quizás tengas en mente. De hecho, me encantaría escucharlos (o mejor aún, verlos), ¡así que compártelos!

Tal vez te puede interesar:

1. La innovación no puede mantener la Web rápida
2. Rendimiento web ultrarrápido
3. Tabla de contenidos fijos con estados activos de desplazamiento
4. “cambiar tamaño: ninguno;” en áreas de texto es una mala experiencia de usuario

Menú revelado por animación de rotación de página

la palancaLa transiciónUna pizca de JavaScriptTal vez te puede interesar:Índice la palanca

programar

es

https://aprendeprogramando.es/static/images/programar-menu-revelado-por-animacion-de-rotacion-de-pagina-1731-0.jpg

2024-06-13

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente