Menú circular desplegable que funciona con jQuery y CSS3

por .

Pie Menu es un fantástico plugin desarrollado con el framework jQuery y con la potencia de CSS3 para la creación de un bonito menú circular animado.

Este menú circular funciona de tal modo que las opciones se encuentran escondidas, y solamente se muestran cuando decidimos extender el menú, para realizar esta acción el menú realiza una atractiva animación, la misma se puede configurar con apenas unos pocos parámetros que nos permiten seleccionar el ángulo de salida, el radio del circulo, etc.

Otro detalle es que el menú puede configurarse con la capacidad de poder ser arrastrado. Esta opción resulta practica para los usuarios en determinadas situaciones en donde el espacio de trabajo se modifica continuamente.

Menú desplegable circular y animado con jQuery

Ejemplo de uso:

Estructura HTML:

<div id='outer_container' class="outer_container" >
        <a class="menu_button" href="#" title="Toggle">
        <span>Menu Toggle</span></a>
        <ul class="menu_option">
          <li><a href="#"><span>Item</span></a></li>
          <li><a href="#"><span>Item</span></a></li>
          <li><a href="#"><span>Item</span></a></li>
          <li><a href="#"><span>Item</span></a></li>
          <li><a href="#"><span>Item</span></a></li>
        </ul>
</div>

JavaScript:

$('#outer_container').PieMenu({
        'starting_angel':0(Starting Angle in degree),
        'angel_difference' : 90(Displacement angle in degree),
        'radius':100 (circle radius in px),
});

No olviden visitar el sitio oficial del plugin, si se encuentran interesados en utilizarlo les recomiendo ver su demostración online.

Web: Pie Menu

Categorizado en: