- Plantillas Web
- Plantillas E-commerce
- Plantillas de CMS y Blog
- Plantillas Facebook
- Constructor Web
Slider jQuery “SlideBox”
marzo 17, 2011
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; }