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:
[js]
[/js]
Seguidamente entre head y /head introducimos el siguien script:
[js][/js]
Creamos una hoja de estilo con la siguiente información y la llamamos entre head /head:
[css].kwicks {
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;
}[/css]
Finalmente creamos la siguiente estructura html entre las etiquetas body /body:
[html]
[/html]
Enlace: Kwicks for jQuery
Qué buena noticia! a veces tenía que incluir ambos frameworks simplemente por este tipo de menus
Excellent script and have ehvyrteing working really well. I’ve used Kwicks to set up an accordion-style home page where each click opens/reveals a different panel.I’ve also got separate content for the closed and open versions of the panel which works lovely.The only problem is that I would like the “open” content to appear only after the animation is complete to avoid the staggering of text and content into view.I have looked through the kwicks code but am not savvy enough to find out how to do this on my own.Could you give me an idea of how I might get the inner content of the kwicks panel to be hidden until the animation is complete (and then perhaps, fadein at a certain duration, or even just a simple “show”).Appreciate your work on this plugin.Oh, for an example of where they have a similar working version of it fading in, please visit .Thanks in advance.