jPanelMenu: Slick Navigation-Sidebar con animaciones CSS y jQuery

jPanelMenu tiene solo unos días, pero ya conoce el principio de funcionamiento de su teléfono inteligente o tableta favorita con Android o iOS. Lo más probable es que utilice la aplicación Facebook o Google+, que implementan una navegación deslizable fuera del lienzo. Un pequeño icono de lista en la esquina superior izquierda simboliza la disponibilidad de un menú de navegación con un toque de su dedo. Es exactamente este principio que jPanelMenu transporta a sus diseños web.

jPanelMenu: perfecto para diseños receptivos

Anthony Colangelo gana su dinero como desarrollador de la agencia de diseño Happy Cog, que con tres oficinas en los EE. UU. no pertenece a los representantes más pequeños de la empresa. En su tiempo libre, le gusta jugar con JavaScript, sacando pequeñas herramientas y ayudantes, la mayoría de los cuales regala de forma gratuita a través de su perfil de Github.

Su último logro es el complemento jQuery jPanelMenu, que parece tan familiar como lo es para todos los nómadas digitales. jPanelMenu ofrece una barra de navegación lateral que se asemeja a la de las aplicaciones para Facebook y Google + tanto como puedas imaginar. Lo que la distingue de sus contrapartes de aplicaciones nativas es el uso de tecnologías web. Como tal, es la elección perfecta para su próxima aplicación web receptiva.

Colangelo quería que se perfeccionara, por lo que incluso implementó la animación deslizante que incorporan las aplicaciones nativas. Lo hizo mediante el uso de transiciones CSS con una alternativa a las animaciones jQuery en navegadores más antiguos. En sí mismo, es perfectamente adecuado para diseños receptivos. Colangelo recomienda combinarlo con el complemento jQuery jRespond y ofrece un ejemplo de cómo hacerlo. jRespond es especialmente útil para activar o desactivar jPanelMenu en función de los puntos de interrupción alcanzados.

Al escribir jPanelMenu, Colangelo pensó en los usuarios que navegan por la web sin JavaScript y se preocupó de no interrumpir la experiencia para ellos. Los usuarios sin Javascript habilitado recurrirán a un menú de estilo css que tendrá que diseñar específicamente. Esto es fácil ya que los estilos jPanelMenu no se interponen en su camino. Solo mientras jPanelMenu se carga y activa, la clase .jPanelMenu se agregará al elemento HTML.

De esta manera sabrás cómo reaccionar con CSS. Todos los estilos específicos de jPanelMenu serán descendientes de .jPanelMenu, por lo que solo mostrarán su magia cuando exista la clase. Colangelo también te muestra cómo hacer esto.

Todo el proyecto está documentado de forma exhaustiva y comprensible y presentado con elegancia. jPanelMenu está a la altura de los estándares de desarrollo actuales. Definitivamente, usted debe darle una oportunidad.

Enlaces relacionados:

• Producto-Sitio web – jpanelmenu.com
• Perfil de Anthony Colangelo – Github
• Repositorio de jPanelMenu – Github
• Suplemento a jPanelMenu – jRespond de Jeremy Field