wheelnavjs-teaser

JavaScript: cree menús de navegación circular con Wheelnav.js

[*]

Las navegaciones no siempre tienen que organizarse horizontal o verticalmente. De hecho, pueden dar vueltas en círculos. Y ahí es donde entra en juego Wheelnav.js. Esta pequeña herramienta inteligente le permite organizar los menús en círculos. Las selecciones se hacen girando la rueda. Wheelnav.js se basa en Raphaël.js, que le permite dibujar SVG usando JavaScript.

Puesta en marcha: incorporar bibliotecas y marcar elementos

Antes de comenzar, necesitaremos incorporar Wheelnav.js y Raphaël.js primero en un documento HTML. También puede utilizar el conjunto gratuito de iconos de Raphaël.js si no desea marcar los elementos de navegación solo con texto. Proporciona acceso rápido a más de 250 iconos.

ruedanavjs

El siguiente paso es crear un elemento contenedor, que luego se llenará con la navegación circular en forma de elemento SVG a través de su ID.

<div id="navigation"></div>

Toda la configuración de navegación se realiza a través de Wheelnav.js. Alpor lo tanto, todos los elementos de menú individuales se marcan a través de la biblioteca. En consecuencia, esto significa que no podrá hacerlo funcionar sin Javascript. Es una buena idea agregar una navegación adicional basada en HTML dentro del contenedor si va a tener enlaces a otros sitios dentro del menú porque Wheelnav.js eliminará todo lo que esté dentro del contenedor. <div> elemento.

Crear y configurar la navegación

Ahora, crearemos la navegación a través de Wheelnav.js llamando wheelnav() y asignando el ID del elemento contenedor.

var nav_in_wheel = new wheelnav("navigation");

Ahora tiene diferentes propiedades y métodos para personalizar el diseño, el contenido y la funcionalidad de la rueda de navegación.

slicePathFunction define el diseño del menú. Primero, elija una de las formas de menú disponibles. El clásico PieSlice muestra la navegación en forma circular, como un gráfico circular. Cada elemento del menú es una rebanada de pastel. DonutSlice es muy similar, solo que con un todo adicional en el medio del gráfico. O puede mostrar los elementos del menú en círculos separados, que nuevamente se organizan en un círculo usando MenuSliceWithoutLine.

ruedanavjs_basistypen
Los ocho tipos estándar

Hay ocho tipos estándar diferentes, algunas formas específicas y la posibilidad de crear sus propios caminos para el diseño de navegación. Estos se proporcionan como funciones y pueden ser bastante complejos.

nav_in_wheel.slicePathFunction = slicePath().Pie;

En el ejemplo, estamos definiendo un menú circular simple. createWheel() agrega la navegación como SVG al <div> elemento.

nav_in_wheel.createWheel();

Si no se hacen más especificaciones, la navegación tendrá cuatro elementos de menú, que se colorean automáticamente y se titulan como title-*.

Definir elementos de menú

El diseño y el etiquetado de los elementos individuales del menú se pueden definir libremente, por supuesto. Los elementos se etiquetan mediante initWheel() y las etiquetas se asignan como objeto literal.

nav_in_wheel.initWheel(["Start", "Profile", "Contact"]);

En lugar de usar textos, también puedes usar los íconos de Raphaël.js. Ver el Raphaël.js sitio web para obtener una lista de todos los íconos y sus nombres.

nav_in_wheel.initWheel([icon.home, "Profile", "Contact"]);

Hay 13 paletas de colores predefinidas para los elementos del menú; sin embargo, también puede definir colores como matriz. Defina un color para cada elemento del menú.

ruedanavjs_farbpaletten
Las paletas de colores predefinidas

Las paletas de colores predefinidas tienen de cinco a ocho valores.

nav_in_wheel.colors = new Array("#4F346B", "#623491", "#9657D6");

Agregar funciones

El diseño y el contenido del menú de la rueda ahora están definidos. Si hace clic en uno de los elementos, la rueda girará hasta que el elemento respectivo esté en el lado derecho de la rueda. Otras acciones se pueden definir como funciones que se asignan a los elementos de menú respectivos.

nav_in_wheel.navItems[0].navigateFunction = function () {
  alert("Clicked homepage.");
};

Se puede acceder a cada elemento del menú a través de navItems[*]. Para asignar funciones que se ejecutarán al hacer clic en un determinado elemento del menú, utilice navigateFunction. En el ejemplo, enviamos una alerta cuando se selecciona el primer elemento del menú.

Animaciones con Wheelnav.js

Como ya se mencionó, al hacer clic en un elemento, la rueda girará hasta que el elemento del menú seleccionado esté en la posición de las 3 en punto. El ángulo se puede ajustar usando navAngle siendo 0° el ángulo predeterminado.

nav_in_wheel.navAngle = 90;

También puede ajustar la velocidad de la animación (en milisegundos) y la aceleración de la animación mediante animatetime y animateeffect. Aquí se le proporcionan los efectos de relajación por Raphaël.js. Estos incluyen efectos clásicos como ease-in y ease-out pero también efectos de relajación muy especiales como elastic.

nav_in_wheel.animatetime = 5000;
nav_in_wheel.animateeffect = "elastic";

Además, sliceSelectedTransformFunction le permite resaltar el elemento de menú activo con una pequeña animación. Esto le permite mover, girar o ampliar el elemento seleccionado.

nav_in_wheel.sliceSelectedTransformFunction = sliceTransform().MoveMiddleTransform;

En el ejemplo, estamos alejando el elemento seleccionado del centro de la rueda de navegación usando MoveMiddleTransform.

ruedanavjs_hervorhebung
Tres posibilidades para resaltar elementos activos

Este artículo es sólo un resumen de lo que Wheelnav.js puede hacer. Hay muchas más funciones para explorar, como la posibilidad de personalizar completamente las formas de la navegación. Por lo tanto, no está limitado a las especificaciones predeterminadas. Sería bueno si pudieras marcar los enlaces a través de HTML y Wheelnav.js los leería. El estado actual de desarrollo, que permite marcar solo con Javascript, no es la mejor solución. Sin embargo, la biblioteca es una herramienta ingeniosa para crear menús destacados y animados, que también son totalmente compatibles con sitios web receptivos. Esto se debe al uso de SVG y al tamaño del menú ajustable a través de CSS. Incluso puede crear menús complejos, incluidos submenús, con esta biblioteca. Ofrece un amplio abanico de posibilidades.

ruedanavjs_untermenue
Menú con submenú

Wheelnav.js se publica bajo la licencia MIT y se puede utilizar para proyectos personales y comerciales. Se puede descargar en Github. Puede apoyar este proyecto haciendo una donación en el sitio web de la biblioteca.

enlaces relacionados

(dpe)

#JavaScript #cree #menús #navegación #circular #con #Wheelnavjs

Publicaciones Similares

Deja una respuesta

Tu dirección de correo electrónico no será publicada.