Es la "showcase-slide" estrella de Yoo... o era.
Porque ya me parecía a mí que debía salir alguna "interpretación" gratuíta para este hack. Y la ha hecho DAEMN,COM, usando query.
Las demos constan de varios draw, horizontales y verticales, onmouseover o en click, con o sin mensaje de "hover", más compactos o menos... hay para todos los gustos.
Yo he escogido para mis pruebas un menú vertical y otro hrizontal onmouseover, que podéis ver AQUÍ
No es difícil de insertar, pero sí de unir en una plantilla ya "llena" (el query puede resultar bastante obstructivo... de esos scripts que "ni comen ni dejan comer").
La explicación la pongo en otro momento, con más tiempo...
-----------------------------------------------
Vamos a ello. Para empezar, podeís descargaros, en Zip, o uno por uno, los ficheros AQUÍ
.- CSS para el Drawer: la parte más trabajosa, porque hay bastantes imágenes:
<link href='http://.../jDrawer.css' media='screen' rel='stylesheet' type='text/css'/>
.- SCRIPTS:
<script src='http://.../jquery.js' type='text/javascript'/>
<script src='http://.../jDrawer.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready(function($)
{
$("#jDrawer-1").jDrawer({event: "click"});
$("#jDrawer-2").jDrawer({speed: 500, sticky: false});
$("#jDrawer-3").jDrawer({layout: "horizontal", sticky: false});
$("#jDrawer-4").jDrawer({layout: "horizontal", event: "click"});
$("#jDrawer-5").jDrawer();
$("#jDrawer-6").jDrawer({callback: function() { alert("hover"); } });
});
</script>
.- HTML: Viene muy clarito en el "index" al que os vinculo. De todas maneras, vamos a ver cómo lo he colocado yo:
<div class='wrapper'>
<div class='module-drawer'>
<div id='jDrawer-5' style='float: left'>
<div class='jDrawer-title'>jDrawer Vertical</div>
<ul>
<li class='jDrawer-active'>
<center>
<a href='#'>
<img alt='New! jDrawer' class='png' height='110' src='http://daemn.com/modules/jDrawer/latest/images/jDrawer.png' title='New! jDrawer' width='150'/>
</a>
</center>
<div class='jDrawer-buffer'>
<h3>New! jDrawer</h3>
<div class='jDrawer-divider'/>
Keep playing with the new jDrawer module.
<br/>
<a href='#'>Learn more...</a>
</div>
</li>
<li>
<center>
<a href='#'>
<img alt='Latest Gadgets' class='png' height='110' src='http://daemn.com/modules/jDrawer/latest/images/gadgets.png' title='Latest Gadgets' width='150'/>
</a>
</center>
<div class='jDrawer-buffer'>
<h3>Latest Gadgets</h3>
<div class='jDrawer-divider'/>
Check out the latest cutting-edge features.
<br/>
<a href='#'>Learn more...</a>
</div>
</li>
<li>
<center>
<a href='#' target='_blank'>
<img alt='jSkin' class='png' height='110' src='http://daemn.com/modules/jDrawer/latest/images/jskin.png' title='jSkin' width='150'/>
</a>
</center>
<div class='jDrawer-buffer'>
<h3>jSkin</h3>
<div class='jDrawer-divider'/>
Professional Web 2.0! template club.
<br/>
<a href='#' target='_blank'>Learn more...</a>
</div>
</li>
<li>
<center>
<a href='#' target='_blank'>
<img alt='Sign up' class='png' height='110' src='http://daemn.com/modules/jDrawer/latest/images/signup.png' title='Sign up' width='150'/>
</a>
</center>
<div class='jDrawer-buffer'>
<h3>Sign Up</h3>
<div class='jDrawer-divider'/>
Web 2.0 for your site?
<br/>
Kick your design from 1999!
<br/>
<a href='#' target='_blank'>Join today...</a>
</div>
</li>
</ul>
</div>
<br/><br/>
<div class='jDrawer jDrawer-horizontal' id='jDrawer-3' style='background-color: rgb(255, 255, 255);'>
<ul class='jDrawer-list' style='height: 184px; width: 991px;'>
<li class='jDrawer-item' style='z-index: 4; left: -234px;'><div class='jDrawer-item-border-1'><div class='jDrawer-item-border-2'><div class='jDrawer-item-border-3'><div class='jDrawer-content' style='background-color: rgb(255, 255, 255);'>
<div style='float: left; padding-left: 10px;'>
<h3>New! jDrawer</h3>
<div class='jDrawer-divider'/>
Keep playing with the new jDrawer module.
<br/>
<a href='#'>Learn more...</a>
</div>
<div class='jDrawer-buffer'>
<a href='#'>
<img alt='New! jDrawer' class='png' height='110' src='http://daemn.com/modules/jDrawer/latest/images/jDrawer.png' title='New! jDrawer' width='150'/>
</a>
</div>
<div style='clear: both;'/></div></div></div></div></li>
<li class='jDrawer-item' style='z-index: 3; left: -58px;'><div class='jDrawer-item-border-1'><div class='jDrawer-item-border-2'><div class='jDrawer-item-border-3'><div class='jDrawer-content' style='background-color: rgb(255, 255, 255);'>
<div style='float: left; padding-left: 10px;'>
<h3>Latest Gadgets</h3>
<div class='jDrawer-divider'/>
Check out the latest cutting-edge features.
<br/>
<a href='#'>Learn more...</a>
</div>
<div class='jDrawer-buffer'>
<a href='#'>
<img alt='Latest Gadgets' class='png' height='110' src='http://daemn.com/modules/jDrawer/latest/images/gadgets.png' title='Latest Gadgets' width='150'/>
</a>
</div>
<div style='clear: both;'/></div></div></div></div></li>
<li class='jDrawer-item' style='z-index: 2; left: 143px;'><div class='jDrawer-item-border-1'><div class='jDrawer-item-border-2'><div class='jDrawer-item-border-3'><div class='jDrawer-content' style='background-color: rgb(255, 255, 255);'>
<div style='float: left; padding-left: 10px;'>
<h3>jSkin</h3>
<div class='jDrawer-divider'/>
Professional Web 2.0! template club.
<br/>
<a href='#' target='_blank'>Learn more...</a>
</div>
<div class='jDrawer-buffer'>
<a href='#' target='_blank'>
<img alt='jSkin' class='png' height='110' src='http://daemn.com/modules/jDrawer/latest/images/jskin.png' title='jSkin' width='150'/>
</a>
</div>
<div style='clear: both;'/></div></div></div></div></li>
<li class='jDrawer-item' style='z-index: 1; left: 353px;'><div class='jDrawer-item-border-1'><div class='jDrawer-item-border-2'><div class='jDrawer-item-border-3'><div class='jDrawer-content' style='background-color: rgb(255, 255, 255);'>
<div style='float: left; padding-left: 10px;'>
<h3>Sign Up</h3>
<div class='jDrawer-divider'/>
Web 2.0 for your site?
<br/>
Kick your design from 1999!
<br/>
<a href='#' target='_blank'>Join today...</a>
</div>
<div class='jDrawer-buffer'>
<a href='#' target='_blank'>
<img alt='Sign up' class='png' height='110' src='http://daemn.com/modules/jDrawer/latest/images/signup.png' title='Sign up' width='150'/>
</a>
</div>
<div style='clear: both;'/></div></div></div></div></li>
</ul>
</div></div></div>
La primera pieza de código es para el Drawer vertical. La segunda, para el Drawer horixontal.
Tiene mucha variedad este elemento!
ResponderEliminarJQuery tiene un modo llamado "no conflict" que permite solventar según tengo entendido los problemas con Mootools debido a que tienen nombres de funciones iguales, sería bastante recomendable de usar aunque desconozco bastante de JQuery que es buena sobre todo por su rapidez.
http://michaelshadle.com/2007/07/03/jquerys-no-conflict-mode-yet-another-reason-why-its-the-best/
Uno en español:
http://www.joomlaspanish.org/foros/showthread.php?t=16966
Una página funcionando:
Quitaste las css también por conflictos? yo estoy probando el iCarousel, ya tengo claro como inicializar las funcionalidades auto, mouseover y demás con JSON, pero no me funciona y me ha dado en pensar al ver tu página que puede ser por eso.
Y que es lo que tienes a bajo del todo?
Sería buena cosa poder compatibilizar query y mootools... a ver si un día de éstos le echo un vistazo a esa página. Muchas gracias por ponerla, Brainiac :)
ResponderEliminarRespecto de las CSS... me temo que no ando últimamente muy espabilada (la gripe ha pasado a ser principio de neumonía... estoy que no me tengo en pie), así que me temo que vas a tener que explicármelo, porque no entiendo... :(
Lo que está bajo los drawer es sólo un conato de prueba, porque quiero más adelante experimentarlo y así me lo recuerdo :).
Se llama "EasyNews" y es una forma query de insertar un slide de noticias.
La página donde lo encontré es ESTA. No dejes de verla, porque tiene cosas muy buenas... aunque no tan "easy": Slides, Pagínas Pop-Up y estas Noticias.
Aún no me ha dado tiempo a meterme a fondo y estudiarlo bien... ya me contarás qué te parece :)
OoOh! está la mar de bien!
ResponderEliminarEl Pop Slide me ha dejado a cuadros, ni siquiera he sido capaz de comprender muy bien del primer vistazo que estaba pasando debido a su complejidad.
Los sliders también tienen muy buena pinta, habrá que prestarle más atención a JQuery aunque ahora ya estoy embarcado en Mootools y no me bajo del barco en medio xDDD pero ya veremos si se puede hacer compatible, o si no seguro que hay equivalentes para todo, ya se verá, primero termino con Mootools xDDD
Que me estás tentando de mala manera! xDDDDDD
A mí me entran ganas de probarlo todo... y sospecho que tengo unas facultades fabulosas para dispersarme y no centrarme, je.
ResponderEliminarPero... ¿A que tdo ésto de las librerías es fascinante? :D (por cierto: voy a comentarte ahora lo de las "EasyNews" que te decía... no resolvía un problema con el div de los controles. Ahora ya lo tengo listo).