aNieto2K Desarrollo web, Wordpress, y alguna cosilla más

Una de las peculiaridades de la página de MooTools es el menú superior, un deslizante muy colorido que hace más alegre la simple tarea de seleccionar una opción, a esto se le llama Kwick (lo he descubierto hoy).

Ahora los que disfrutamos del poder de jQuery tambien podemos disfrutar de una implementación de Kwicks para este gran framework.

Código

//HTML
<ul class="kwicks">
<li id="kwick1"></li>
<li id="kwick2"></li>
<li id="kwick3"></li>
<li id="kwick4"></li>
</ul>
//CSS
/* defaults for all examples */
.kwicks {
list-style: none;
position: relative;
margin: 0;
padding: 0;
}
.kwicks li{
display: block;
float: left;
overflow: hidden;
padding: 0;
cursor: pointer;
}
/* defaults for all examples */
.kwicks li {
width: 125px;
height: 100px;
margin-right: 5px;
}
#kwick1 { background-color: #53b388;}
#kwick1.active { background-color: #86e6bb;}
#kwick2 {background-color: #5a69a9;}
#kwick2.active {background-color: #8d9cdc;}
#kwick3 {background-color: #c26468;}
#kwick3.active {background-color: #f5979b;}
#kwick4 { background-color: #bf7cc7; margin-right: none;}
#kwick4.active {background-color: #efaffa;}
//Javascript
$().ready(function() {
     $('.kwicks').kwicks({
               maxWidth: 205,
               spacing:  5
      });
});

Opciones

La simplicidad de uso limita el número de opciones disponibles para la personalización de nuestro Kwick, pero se bastan para conseguir un resultado muy vistoso.

maxWidth: Requerido
Tamaño en px. del máximo de nuestro Kwick
duration: Default: 200
Número de milisegundos de la transición
easing:
Easing function para la animación (Requiere plugin Easing)
spacing: Default:0
Tamaño en px. de separación entre cada kwick
[Descargar][Demo]