Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. JavaScript

Completando nuestro menú desplazable fuera del lienzo con GreenSock

by
Difficulty:AdvancedLength:MediumLanguages:
This post is part of a series called The Beginner’s Guide to TimelineMax.
Building a Draggable Off-Canvas Menu with GreenSock

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

Final product image
What You'll Be Creating

En la primera parte de este trayecto sobre el menú desplazable hablamos de cómo incluir scripts, investigamos throwPropsPlugin, ¡incluyendo los requisitos para comenzar nuestro proyecto con la esperanza de llevarlo a las once! Ahora, prepárate para hacer un sistema de menú fuera del lienzo que reacciona al teclado y al tacto.

La demostración

La demostración completa que vamos a crear y de la cual hablaremos durante el resto de este tutorial también está disponible en CodePen.

Te animo a probar esto por ti mismo a través de tantos dispositivos como sea posible, especialmente la navegación por teclado. Cada interacción, ya sea táctil, de teclado o de ratón, se ha contabilizado, pero como encontrarás en nuestro panorama actual no puedes detectar una pantalla táctil y a veces intentar hacerlo incluso resulta en falsos positivos.

La configuración

Usando el marcado de la parte I comenzaremos agregando un contenedor div para fines estructurales junto con clases correlacionadas para CSS y enlaces JavaScript.

Las clases que comienzan con el prefijo "js" significan que estas clases solo aparecen en JavaScript; eliminarlas obstaculizaría la funcionalidad. Nunca se utilizan en CSS, ayudando a aislar el enfoque de las preocupaciones. El contenedor circundante ayudará a controlar el comportamiento de desplazamiento que se habla en la próxima sección CSS.

Accesibilidad

Con la base en su lugar es el momento de añadir una capa de ARIA en la parte superior para dar significado semántico a los lectores de pantalla y usuarios de teclado.

Dado que el menú se ocultará de forma predeterminada, el atributo aria-hidden se etiquetará como true y se actualizará en consecuencia dependiendo del estado del menú; false para abierto, true para cerrado. Aquí está una explicación del atributo aria-hidden según la especificación W3C:

Indica que el elemento y todos sus descendientes no son visibles ni percepibles para ningún usuario tal como lo implementó el autor. [...] Los autores DEBEN establecer aria-hidden"true" en el contenido que no se muestra, independientemente del mecanismo utilizado para ocultarlo. Esto permite que las tecnologías de asistencia o los agentes de usuario omitan correctamente los elementos ocultos del documento. ~Especificaciones de WAI-ARIA de W3C

Los autores deben tener cuidado con el contenido que ocultan, haciendo de este atributo una discusión independiente fuera del ámbito de este artículo. Para aquellos curiosos, la especificación define el atributo en longitud adicional y es algo que puede ser entendido; algo que no suelo decir que a menudo acerca de la jerga de especificación.

El CSS

Nuestro CSS es donde realmente comienza la magia. Tomemos las partes importantes de la demo que tienen significado y desglocemos esto.

Establecer la altura del documento (body) en 100% permite que el contenedor estire toda la ventana gráfica, pero también está ejecutando una parte más importante; lo que nos permite ocultar su desbordamiento.

La corrección de desplazamiento de desbordamiento ayuda a controlar cómo se comportan el contenedor principal y la navegación cuando cualquiera de ellos contiene contenido desbordante. Por ejemplo, si el contenedor se desplaza (o el menú), el otro no se desplazará cuando el usuario llegue al final del elemento inicialmente desplazado. Es un comportamiento extraño, que normalmente no se discute, pero hace que sea una mejor experiencia de usuario.

Unidades de ventana gráfica

Las unidades de ventana gráfica son realmente potentes y desempeñan un papel vital en la forma en que el contenedor principal contiene contenido desbordante. Las unidades de ventana gráfica tienen un soporte maravilloso en todos los navegadores en estos días y te sugiero que comiences a usarlos. He usado unidades vh en el navegador, pero podría haber usado un porcentaje en su lugar. Durante el desarrollo se descubrió que div.app debe usar unidades vh ya que el porcentaje no permitirá que el contenido desbordante mantenga el comportamiento de desplazamiento típico; el contenido da como resultado ser recortado. El desbordamiento se establece para desplazarse (hacer scroll) en preparación en caso de que los elementos de menú excedan la altura del menú o la altura de la ventana gráfica se vuelva estrecha.

El .no-js .nav:target proporciona acceso a nuestro menú independientemente de si JavaScript falla o está desactivado, de ahí la razón por la que agregamos el valor de ID al atributo href del botón del menú.

La navegación principal se mueve a la derecha a través de un margen negativo que también es el mismo que el ancho del navegador. En aras de la brevedad estoy escribiendo Vanilla CSS, pero estoy seguro de que podrías escribir algo más elegante en un preprocesador de tu elección.

El JavaScript

JavaScript es la última parada de este recorrido del menú desplazable, pero antes de escribir una línea de JS tendremos que escribir una configuración de patrón de módulo.

Variables

Para la configuración definiremos algunas variables para futuras referencias.

La mayoría de estas variables son simplemente para agarrar elementos DOM, con la excepción de los dos últimos que definen nuestros objetivos GreenSock más el ancho del menú de navegación. La función de utilidad getScrollBarWidth() (fuera de nuestra discusión hoy) obtiene el ancho de la barra de desplazamiento para que podamos colocar el navegador justo más allá del ancho de la propia barra con el fin de verlo cuando se abre el menú. Los objetivos son lo que movemos cuando se abre el menú para permitir que se empuje contenido adyacente.

Métodos

Para abreviar, solo analizaré los métodos que son extremadamente importantes para la funcionalidad del comportamiento del menú. Todo lo demás que verás en la demostración que no se discute aquí es el "azúcar en la parte superior" que hace que el menú sea aún más poderoso.

La función menu detecta si la coordenada x del contenedor es igual al estado de navegación cerrado. Si es así, los objetivos vuelven a su posición inicial, de lo contrario los establece en su posición abierta.

Esta es una función de utilidad para verificar el estado del menú. Esto devolverá 0 si el menú está cerrado o un valor negativo si está abierto.

Esta es otra función de utilidad que establece la coordenada x del objetivo dentro del parámetro de matriz del método .set() en la posición x del contenedor cada vez que ocurre el evento onDrag o onThrowUpdate. Esto es parte de la instancia del objeto Draggable.

Estas funciones ayudan a determinar si alguien realmente está seleccionando texto para habilitar o deshabilitar las capacidades de selección cuando alguien arrastra la pantalla. Este no es el comportamiento más ideal para los eventos del mouse, pero nuevamente, como ya mencionamos, no puedes detectar una pantalla táctil.

Instancia de Draggable

Como discutimos en el tutorial anterior sobre Draggable, esto creará la instancia del objeto Draggable y apuntará a los objetos DOM de nuestra elección que se pueden pasar como una matriz.

Esta es toda nuestra instancia de Draggable y las propiedades utilizadas. El código de demostración real contiene comentarios que dejé para comprender y obtener una mejor perspectiva de la responsabilidad de cada uno. Te animo a que busques en el código de demostración e incluso te retes a que deconstruyas el por qué y cómo.

Muy largo, pero no es un adiós

Este es el final de nuestro viaje con GreenSock y espero que hayas aprendido un montón en el camino. Un agradecimiento especial a Jack y Carl en GreenSock, junto con toda la comunidad GreenSock, por su increíble ayuda a lo largo de esta serie. Por último, pero no menos importante, muchas gracias a ti, el lector, por llegar al final de esta serie; ¡felicidades! Espero que esta serie te haya ayudado a conocer mejor los poderosos beneficios y capacidades de una impresionante biblioteca de animación JavaScript. ¡Construye cosas increíbles y sé creativo!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.