Debo admitir que a lo largo del tiempo he conoció cantidad de menú que podríamos usar en nuestros proyectos. Cantidad de diseños y sobre todos efectos. Algo así como un menú adecuado para cada proyecto que nos encontremos encarando. Pero dentro de todos los que he probado o dentro de todos los diseños que me han gustado, uno de los que mas ha llamado mi atención es aquel que podremos encontrar en la Web oficial de MooTools, el cual posee un efecto denominado “kwicks” y el cual en una oportunidad comente aquí (basado en MooTools). Pero hoy acabo de encontrar este mismo menú, que se caracteriza por generar un desplazamiento al estilo de marcianas horizontales, pero esta vez realizado en base a jQuery. El efecto sigue siendo igual de extraordinario, lo que me recuerda que de una vez por todas, lo debería usar en mi porfolio personal. Si aun no entienden de lo que hablo, tan solo vean el menú citado en el ejemplo.
Ver Demo - Descarga Ejemplo - MAs Informacion jeremymartin
Instalación:
Alojamos los archivos necesarios en nuestro servidor, y realizamos las llamadas correspondientes a nuestros archivos.
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript" src="jquery.kwicks.js"></script>
<script type="text/javascript">
$().ready(function() {
$('#menukwicks .kwicks').kwicks({
maxWidth: 205,
spacing: 5
});
});
</script>
damos estilo
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;
}
Y por ultimo, la estructura de nuestro Menu
<ul class="kwicks">
<li id="kwick1"></li>
<li id="kwick2"></li>
<li id="kwick3"></li>
<li id="kwick4"></li>
</ul>
</div>
2 Comentarios por usuarios
gracias por los recursos,
Excelente gracias !!