Simple slide panel - Practica forma para añadir información adicional
Simple slide panel, es otra practica forma para añadir contenido o información adicional sobre nuestra empresa, nosotros o sobre los perfiles en los cuales participamos en Internet. Posee un efecto simple pero muy atractivo, y lo mejor es que siempre llama la atención de alguna forma. Seguramente habrán visto varios slide de este tipo, donde la idea es hacer clic sobre un vinculo (boton) que accionara nuestro slide, mostrando todo el contenido en el, con un efecto de desplazamiento (arriba / abajo) similar al de una persiana de oficina.
Ver Demo - Descarga ejemplo - Referencia webdesignerwall
Instalación:
Descargamos jquery y realizamos como de costumbre la llamada a nuestra librería de nuestro encabezado (Head)
-
<script type="text/javascript" src="jquery.js"></script>
-
-
<script type="text/javascript">
-
$(document).ready(function(){
-
-
$(".btn-slide").click(function(){
-
$("#panel").slideToggle("slow");
-
$(this).toggleClass("active"); return false;
-
});
-
-
-
});
-
</script>
Añadimos un poco de estilo (style.css)
-
/**********************************************
-
* Estilos para nuestro panel superior *
-
***********************************************/
-
#panel {
-
background: #754c24 url(images/panel.jpg) repeat;
-
height: 250px;
-
display: none;
-
}
-
-
-
.slide {
-
margin: 0;
-
padding: 0;
-
border-top: solid 4px #422410;
-
background: url(images/btn-slide.gif) no-repeat center top;
-
}
-
.btn-slide {
-
background: url(images/white-arrow.gif) no-repeat right -50px;
-
text-align: center;
-
width: 144px;
-
height: 31px;
-
padding: 10px 10px 0 0;
-
margin: 0 auto;
-
display: block;
-
font: bold 120%/100% Arial, Helvetica, sans-serif;
-
color: #fff;
-
text-decoration: none;
-
}
-
.active {
-
background-position: right 12px;
-
}
-
-
-
/**********************************************
-
* Estilos para nuestra foto *
-
***********************************************/
-
-
#profileImage { float:left; width:105px; margin: 30px 15px 15px 15px;}
-
#profileImage img { border: 2px solid #422410; }
-
div#profileText { float:right; width:350px; color:#fff;}
-
div#profileText a { color:#F68A1A;}
-
-
/**********************************************
-
* Estilos para nuestros Iconos de perfiles *
-
***********************************************/
-
.blog {
-
font-size: 11px;
-
padding-left: 17px;
-
margin-left: 2px;
-
margin-bottom: 5px;
-
background:url(images/blog.gif) bottom left no-repeat;
-
List-style:none;
-
}
-
..... etc
Contenido
Slide панель на jQuery | EvilFaeton Blog said,
Wrote on May 8, 2008 @ 9:55
[...] Исходники доступны на блоге автора. [...]
diarioTHC | Tres formas para conseguir un “Sliding panel” said,
Wrote on May 12, 2008 @ 11:43
[...] Simple slide panel - Práctica forma para añadir información adicional: Tutorial realizado por el amigo Nikko donde explica como conseguir un cajón con las características mentadas mediante un código en jQuery salido desde web designer wall. Lo más interesante es como organiza el contenido que se muestra dentro del cajón y los estilos. [...]