Menú circular como el de Path con jQuery y Circle Menu

Últimamente se ha estado hablando de Path, la app social para Android y iOS que ha estado empezando a tomar vuelo. Más allá de su funcionalidad, una de las cosas que se le destaca es su diseño bonito y funcional (la he probado y doy fe de ello).

Hoy traeremos un plugin para jQuery que permite copiar elegantemente la navegación que utiliza Path en muchas de sus pantallas. Como todos los plugins de este framework, su utilización es muy sencilla. Basta con bajar el archivo, e incluirlo junto a tu versión de jQuery. Luego, para implementarlo, los códigos son los siguientes:

HTML:

  
+
  
1
  
2
  
3
  
4
  
5

La lista UL encerrará la navegación, mientras que el primer ítem li será el que represente al centro del círculo que abrirá o cerrará la navegación. El código Javascript para inicializarlo es muy sencillo:

$('ul').circleMenu({
  item_diameter: 40,
  circle_radius: 100,
  direction: 'bottom-right'
});

El plugin trae muchas opciones que se pueden personalizar al momento de inicializarlo.

Si no conocés la navegación de Path, aquí hay ejemplos de este plugin para que veas su funcionamiento. Como se ve, hay siete formas de mostrarlo, lo que lo hace muy customizable, entre otras opciones.

Página de Circle Menu