Protofish: Menú de selección avanzado para Prototype

ProtoFish es un menú hover avanzado basado en Prototype, mediante el cual puedes añadir fácilmente un delay a tu menú (on mouseout) y seleccionar tu propia clase hover.

Todos los menues ProtoFish responderán a aquellos usuarios que utilicen la tecla TAB para navegar a través de tu sitio web. Pero lo mejor de esto es que es completamente personalizable y gratuito.

Comienzo rápido:

Antes que nada descarguemos e integremos ProtoFish.

Aquí podrás ver un demo de ProtoFish en acción.

Propiedades:

1. Liviano: 2.45kB (1.31kB comprimido).
2. No obstrusivo: recae en un menú hover CSS estándar.
3. Funciona en múltiples navegadores: IE6+, Safari 3+, Opera 9+, Chrome, Firefox 2+.
4. Completamente personalizable: puedes definir tu propia clase hover y el delay que deseas.
5. Accesible para usuarios que navegan a través del teclado.
6. Son posibles múltiples instancias por página.
7. Subniveles ilimitados.
8. Rápido.
9. Licencia: MIT.

Si esto les parece poco, pronto habrá una actualización del servicio con navegación de teclado mejorada (a través de las flechas) que también solucionará el problema de un pequeño bug que sucede al presionar Shift+Tab.

Especificaciones:

1. Se requiere Prototype 1.6.
2. La última modificación fue el 17/06/2009.

Ahora sí, a implementarlo:

• Descarga ProtoFish (completo) o ProtoFish (achicado) e inclúyelo en tu página:

< script type=”text/javascript” src=”js/prototype.js”>< /script>
< script type=”text/javascript” src=”js/protofish.js”>< /script>

• Inicializa tu menú ProtoFish mediante el siguiente código:

< script type=’text/javascript’>
document.observe(’dom:loaded’, function(){
new ProtoFish(’my-menu’, ‘400′, ‘hover’, false);

});

< /script>

• La clase ProtoFish toma cuatro parámetros:

1. La id del menú (En el ejemplo: my-menu)
2. Delay antes de cerrar el menú (En el ejemplo: 400 ms)
3. La classname que se debe añadir al realizar hover sobre los ítems del menú. (En el ejemplo: hover)
4. La especificación de si el menú debe o no remover classnames activos cuando los visitantes realizan hover sobre el menú. (En el ejemplo: false)

• Edita tu CSS para que soporte los comportamientos show & hide basados en la clase hover que has definido.

Y así de sencillo, con estos simples pasos ya estarás listo.

¿Por qué ProtoFish?

La mayoría de las personas conocen al padre de todos los menús hover, el menú dropdown SuckerFish. Obviamente, el nombre ProtoFish es una combinación del framework Prototype JS y la técnica SuckerFish. Si bien existen muchas versiones mejoradas del dropdown SuckerFish, ninguna de éstas había logrado cumplir con los siguientes criterios:

• El script debía estar basado en Prototype,
• El script debía ser liviano y…
• El script debía ser fácil de implementar.

Desde ya era bastante difícil encontrar un buen script de menú basado en el primer criterio, por lo que encontrar los tres criterios en un mismo script era más dificil que ganar la lotería… ¡Hasta el momento!

¿Puedo personalizar ProtoFish?

Obviamente. Está permitido utilizar ProtoFish sin restricciones. Separa el código en partes, añade funciones ¡Simplemente utilízalo de la forma que más te guste!

Fuente: Tech Blog