Creando menú con efecto kwicks
Un efecto interesante para nuestros menús puede ser el conocido como “kwicks”, en un primer momento realizado con mootools pero que ahora también podremos conseguir con jQuery gracias a una librería para tal fín creada por Jeremy Martin. Con la librería podremos hacer varios menús diferentes todos con efecto slider en los diferentes elementos. Aquí vamos a ver como realizar uno en concreto, para ver el resto a la página del creador. Demo de lo que obtendremos.
Lo primero será descargar estas tres librerías que son las que nos hacen falta: 1, 2 y 3 (usar opción botón derecho guardar enlace como). Una vez las tengamos la llamamos desde nuestro html entre las etiquetas head /head:
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript" src="jquery.kwicks.js"></script>
Seguidamente entre head y /head introducimos el siguien script:
$().ready(function() {
$('#menukwicks .kwicks').kwicks({
maxWidth: 205,
spacing: 5
});
});
</script>
Creamos una hoja de estilo con la siguiente información y la llamamos entre head /head:
list-style: none;
position: relative;
margin: 0;
padding: 0;
}
.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;
}
Finalmente creamos la siguiente estructura html entre las etiquetas body /body:
Enlace: Kwicks for jQuery
Posts relacionados
3 Comentarios
Leave a comment
Qué buena noticia! a veces tenía que incluir ambos frameworks simplemente por este tipo de menus
[…] Via Anieto2k - diariothc […]
[…] Creando menús con efecto kwicks con jQuery […]