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]
3 comentarios, 3 referencias
+
#