JMiur [E]

Horizontal Panel Sliding es un script para JQuery muy interesante que generara un panel con enlaces que podemos desplegar y contraer con un efecto de animación.


Primero, vamos a agregar la librería antes de </head>:
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1.3.2");
</script>
Y como requiere un plugin extra llamado jQuery Easing, lo descargamos y lo alojamos en un servidor externo:
<script type='text/javascript' src='URL_jquery.easing.1.3.js' />
o lo agregamos copiando y pegando su contenido:
<script type='text/javascript'>
//<![CDATA[
... aquí pegamos el contenido del archivo ...
//]]>
</script>
y luego, el script del panel:
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$("a#controlbtn").click(function(e) {
e.preventDefault();
var slidepx=$("div#linkblock").width() + 10;
if ( !$("div#maincontent").is(':animated') ) {
if (parseInt($("div#maincontent").css('marginLeft'), 10) < slidepx) {
$(this).removeClass('close').html('Ocultar');
margin = "+=" + slidepx;
} else {
$(this).addClass('close').html('Mostrar');
margin = "-=" + slidepx;
}
$("div#maincontent").animate({
marginLeft: margin
}, {
duration: 'slow',
easing: 'easeOutQuint'
});
}
});
});
//]]>
</script>
El CSS es lo que nos permitirá personalizarlo:
<style type='text/css'>
div#wrap { /* es el rectángulo conteendor */
margin: 0 auto;
overflow: hidden; /* esta propeidad es importante */
position: relative;
width: 100%;
}
#controlbtn { /* el área superior con Mostrar/Ocultar */
-moz-border-radius-bottomright: 20px;
-moz-border-radius-topright: 20px;
background-color: #345;
padding: 2px 10px;
}
a#controlbtn { /* el texto del enlace Mostrar/Ocultar */
color: #DEF;
display: inline-block;
padding-left: 25px;
text-decoration: none;
}
a#controlbtn.open { /* la imagen para Mostrar */
background: transparent url(URL_imagen_MENOS) no-repeat left center;
}
a#controlbtn.close { /* la imagen para Ocultar */
background: transparent url(URL_imagen_MAS) no-repeat left center;
}
div#maincontent { /* el rectángulo inferior */
margin-left: 145px;
position: relative;
}
div#linkblock { /* el rectángulo izquierdo con los enlaces */
border-right: 1px solid #345;
float: left;
margin-left: -145px; /* el valor negativo del margen de div#maincontent */
width: 125px; /* el ancho contmplando cierto margen */
}
h4 { /* el título */
clear: none;
color: #667788;
font-family: Century Gothic;
font-size: 22px;
font-weight: normal;
letter-spacing: -1px;
line-height: 1.5;
margin: 0;
}
#yourlist { /* la lista con las referencias */
list-style: none;
margin: 0;
padding: 0;
}
#yourlist li { /* cada item de la lista */
margin: 0 0 2px 0;
padding: 3px 0 3px 10px;
position: relative;
}
#yourlist li a { /* cada item es un enlace */
color: #ABC;
font-family: Tahoma;
font-size: 17px;
}
#yourlist li a:hover { /* efecto hover */
color: #BCD;
}
#maincontent p { /* el contenido del rectángulo derecho */
color: #999;
font-family: Arial
font-size: 12px;
}
</style>

13 comentarios:

Ciberwing  

Holas, oye, cómo hacer para agregar tanto script (supongo que en el header) a Blogger, tal parece que es bastante flexible en ese ámbito (ya que es bastante inseguro que te dejen hacerlo, en wordpress.com no se puede)... igual como que no soy muy amigo de estas librerías de efectos JS. Prefiero CSS :P

Responder
Inmortal  

No hay conflicto con Scriptaculous o algun otro?

Responder
JMiur  

Ciberwing:
El servicio gratuito de WordPress no permite modificar las plantillas; Blogger, en cambio, permite hacerlo y por lo tanto, los scripts se pueden colcoar en cualquier lugar, donde sean necesarios, dependerá de cuales.
No veo motivos de seguridad para impedir su uso. La seguridad depende sólo de nuestras propias acciones y precausiones al navegar.

Guillermo:
Si bien es posible usar dos librerías diferentes, eso requiere hacer algunas modificaciones y yo no lo aconsejaría. Las paginas se vuelevn un poco pesadas y siempre habrá algún conflicto.

Responder
Unknown  

Eu tengo Scriptaculous, por lo que no deseo se peleen en la plantilla, digo por eso del 'conflicto' :D faltaría más, aunque Iván de Banaka nos ha enseñado 'que se puede', prefiero terminar el año bien.

Responder
Manuel Alberto  

Hola JMiur. Solucionado mi problema con Blogger. Estamos nuevamente en la red. :D
Saludos

Responder
Gem@  

No furula el ejemplo J.Miur, voy a probar otra vez.

Responder
Gem@  

Ahoraaaa si :)
Es la impaciencia.

Responder
JMiur  

Graciela: Poder se puede, no es simple pero se puede. Pero, no recomendaría mezclarlas :D

Manfenix: Me alegro que se desbloqueara :D

Responder
JMiur  

Gem@: Dele tiempo, sólo tengo dos manos :D
Claro, es que al usar un IFRAME para mostrarlo, las cosas se demoran un poco más de lo normal y estos dias, Blogger anda lentito :D

Responder
Unknown  

No quiero ser racista, pero no es momento de la JQuery...imagina peléandose en la plantilla a las dos :O

Responder
JMiur  

Jajajaja. No Graciela, no quiero imaginarme semejante guerrra :D Terminemos el año en paz :D

Responder
Unknown  

Claro Jorge es lo que te decía en el primer mensaje, imagina saliendo a las chicas 'plantillas' en primera plana :D

Responder
Unknown  

Oye man eres un master (Y)leo todo lo que pones,me pregunto como es que sabes tanto :O,tu blog ni se diga,es el mejor que he visto

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR