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>
Loading ...
Diego Ignacio
19-04-2008
Permalink
La verdad de me quedo con el de mootools, solo por cuestion de codigo js.
Francisco Carle
19-04-2008
Permalink
Les agradezco enormemente este tutorial, ya que con él pude darle forma al inicio de mi web personal:
http://www.franciscocarle.com
-por favor, no lo tomen como spam, solo como un ejemplo ilustrativo-
Francisco Carle
19-04-2008
Permalink
Una consulta: ¿Cómo puedo hacer para que funcione sin errores en Safari?
Menu acordeón en javascript de tan solo 1kb « Xyberneticos
19-04-2008
Permalink
[...] tiene tan sólo 1 kb. Sin duda será una muy bonita alternativa a los ya comentados anteriormente Kwicks con jQuery o Menu Kwicks con [...]
DARKLEESS
19-04-2008
Permalink
ESTA MUY BUENO EL POST SE PARECE MUCHO AL MENU QUE ESTA EN UNA PAGINA