Cómo crear menús contextuales personalizados con justContext.js

Todo navegador web cuenta con un menú contextual por defecto. Este aparece cuando el usuario hace clic con el botón derecho del ratón en cualquier parte de la página y normalmente, todos tienen las mismas opciones, como “copiar”, “guardar” o “inspeccionar elemento”.

Con la librería justContext puedes crear menús contextuales concretos para cualquier elemento de tu sitio web. A estos menús contextuales personalizados puedes añadirle cualquier opción. Es decir, puedes asociar una opción de dicho menú a una función personalizada que se ejecute cuando el usuario haga clic en ella.

Cualquier elemento de tu página puede contar con su propio menú contextual. Esto significa que el menú puede afectar a objetos individuales, como slideshows o reproductores de vídeo en HTML5, como a todo el body de la página.

Con esta librería tendrás control absoluto sobre el aspecto de tu menú contextual, incluyendo fuentes, colores, iconos e incluso separadores para separar las distintas secciones del menú. Este plugin te permite crear un menú contextual completo desde cero con las características que desees.

Cada tema puede personalizarse con distintas fuentes de Google, por no hablar de la librería Font Awesome, la cual viene integrada por defecto.

Lo peor de la librería es que no funciona en Internet Explorer. Pero eso no debería suponer ningún problema dado los tiempos que andamos y teniendo en cuenta que su sustituto, Microsoft Edge, es más que decente.

Crear un menú contextual con justContext.js es la mar de sencillo. Solo tienes que escribir código HTML que enlazará con algunas clases CSS de la librería.

Aquí tienes un ejemplo del main repo de GitHub del proyecto:

ul class="jctx jctx-id-foo jctx-black jctx-black-shadow">
  <li data-action="cut">Cut</li>
  <li data-action="copy">Copy</li>
  <li data-action="paste">Paste</li>
  <hr>
  <li data-action="new_pkg">New package</li>
 <li data-action="new_cls">New class</li>
  <li data-action="new_intf" class="disabled">New interface
 (a disabled entry)</li>
</ul>

Si estás dispuesto a jugar con la configuración, puedes hacer mucho más con este plugin. Pero, también admito que es un recurso específico de nicho que no será valioso para todos los sitios web.

Independientemente de por qué o cómo la utilizarías, justContext es el mejor recurso para crear menús contextuales web desde cero. Toda la documentación está disponible en GitHub y el plugin es 100% libre de usar en cualquier proyecto web.

Fuente: hongkiat.com

Guardar