Para crear un vistoso menú, ya no es necesario usar alguna tecnología como Flash, porque con jQuery se pueden hacer implementaciones muy modernas y con atractivos efectos, como por ejemplo, un menuú que muestra unos colores difuminados al posar el puntero del mouse.
Blend: jQuery Effect es un plugin jQuery que permite crear un menú con efecto difuminado muy fácilmente.
Implementación
Implementar este menú es tan sencillo como:
Definir los estilo en una CSS
Si descargas el ejemplo y revisas el código verás que éste utiliza sprites, que en realidad es muy sencillo, todos los gráficos están en un sólo archivo imagen y con CSS se muestran determinadas porciones de este.
Enlazar los archivos JS:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"> </script> <script type="text/javascript" src="jquery.blend.js"></script>
Inicializar el script:
<script type="text/javascript"> $(document).ready(function(){ $("#demo a").blend(); }); </script>
Y definir en el cuerpo del HTML (BODY) algo similar a la siguiente porción de código:
<div class="demo" id="demo"> <h2>Blend Default: $(selector).blend();</h2>
<a href="#" id="demo_home">Home</a> <a href="#" id="demo_blog">Blog</a> <a href="#" id="demo_demo">Demo</a> <a href="#" id="demo_about">About</a> <a href="#" id="demo_services">Services</a> <a href="#" id="demo_contact">Contact</a>
</div>
También se puede usar otras variaciones del efecto como:
$("#demo a").blend({pulse:true}); //efecto pulsante
$("#demo a").blend({reverse:true}); //efecto inverso
Como vez, con cada implementación jQuery se logra muy fácilmente efectos muy atractivos que potencian nuestros desarrollos y enriquecen la experiencia del usuario.
Blend: jQuery Effect:
Vía: delicious.com
