Un simple script que nos permite lograr un efecto de ‘sliding box’ (caja de deslizador) con contenido.
JavaScript
Debemos incluir framework jQuery señalando el atributo src de la etiqueta de script a esos ficheros .js.
<script type="text/javascript" src="js/jquery-1.4.2.min.js" ></script>
Colocamos el script de inicialización en la sección <head> </head>.
<script type="text/javascript">
$(function()
{
$("#link").click(function(event) {
event.preventDefault();
$(this).toggleClass("link2");
$("#dropdown_box").slideToggle();
});
});
</script>
.header-banner-right esta clase define la altura de la caja en la posición oculta
#link este es un elemento de botón con una imagen que oculta el contenido #dropdown_box este id es el área de contenido de la caja (cuadro).
HTML
Aquí puede revisar la representación general de script HTML:
CSS
#link {
background:url(images/button_go_box.png) no-repeat 0 0;
display:block;
height:39px;
width:39px;
z-index:180000;
margin:0 0 0 471px;
position:absolute;
}
.dropdown_box {
z-index:1;
}
.dropdown_box {
zoom:0;
z-index:1;
}
.all .dropdown_box {
zoom:0;
z-index:1;
}