SummArg | Cursos y recursos para webmasters

26/02/2012

Menú circular animado con jQuery

Circle Menú es un plugin para jQuery que nos permite insertar de forma muy sencilla un menú circular animado a nuestro proyecto web. Posee varios tipos de animación, como pueden observar en el demo, que pueden activarse onhover u onclick.

Para implementarlo en nuestro proyecto primero debemos insertar jQuery y el plugin entre etiquetas <head>.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
 <script src="/scripts/jQuery.circleMenu.js"></script>

Luego armamos un menú, en este caso dentro de una lista desordenada.

<ul>
 <li><a href="#">+</a></li>
 <li><a href="#">Link 1</a></li>
 <li><a href="#">Link </a></li>
 <li><a href="#">Link 3</a></li>
 <li><a href="#">Link 4</a></li>
 <li><a href="#">Link 5</a></li>
 </ul>

Y finalmente le indicamos al script que debe aplicarse a nuestra <ul> con determinados parámetros.

<script type="text/javascript">
$('ul').circleMenu({
 item_diameter: 40,
 circle_radius: 100,
 direction: 'bottom-right'
 });
</script>

Descarga y documentación | Demo

 

Dejar un comentario

  1. Yusef Rosales

    Muy padre, saludos!!

Dejar un comentario