SummArg | Cursos y recursos para webmasters

14/01/2011

Menu que sigue al cursor

En el site de Malihu nos ofrecen un pequeño plugin para el framework jQuery que nos permite hacer que un menú colapsado siga al puntero del mouse por la pantalla y al hacer un click sobre el mismo, se despliegue y nos permita la selección de sus items.

Demo | Descarga

Modo de uso

Entre etiquetas <head> cargamos los siguientes archivos:

<link href="malihu.cfm.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
<script src="jquery.easing.1.3.js" type="text/javascript"></script>

Luego de la etiqueta <body> se debe colocar el menú, tal como lo indican en la web del autor, y antes de la etiqueta de cierre se carga el script y sus opciones:

<script>
//configuración del script
$mouseover_title="+ MENU"; // título del menú en mouseover
$mouseout_title="MENU"; // título del menu al quitar el puntero
$menu_following_speed=2000; // velocidad en milisegundos a la que se moverá el menú para seguir al puntero
$menu_following_easing="easeOutCirc";
$menu_cursor_space=30; // espacio entre el puntero y el menú
$menu_show_speed="slow"; // velocidad de la animación para abrir el menú
$menu_show_easing="easeOutExpo"; // tipo de animación easing para abrir el menú
$menu_hide_speed="slow"; // velocidad de cierre del menú
$menu_hide_easing="easeInExpo"; // tipo de animación easing para cerrar el menú
</script>
<script src="malihu.jquery.cfm.js"></script>

Esperamos que les sea de utilidad!

Dejar un comentario