¿Siempre te gustaría desplegar un menú, panel o una información de manera permanente en tu sitio web? Hay varias alternativas para eso, pero en este caso explicare como usar “Simple Slide Panel”.
El primer paso de para hacer funcionar todo esto, es descargar una copia de jQuery e insertarlo en el HTML de tu página (de preferencia dentro de la etiqueta <head>).
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.js"></script>
Luego hay que escribir las siguientes funciones para decir lo que jQuery que hacer. El siguiente diagrama explica los detalles de cómo el trabajo de jQuery:
<script type="text/javascript">
$(document).ready(function(){
$(".btn-slide").click(function(){
$("#panel").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
});
</script>
Como podemos ver en la siguiente imagen, esta es la estructura de los Divs y CSS del elemento.
Cuando haces click sobre el botón con la <a class=”btn-slide”>, se despliega el contenido de arriba hacia abajo y el elemento <div id=”panel”> y luego cambiar a una clase CSS = “.active” a la <a class=”btn-slide”>. La clase “.active” cambiará el fondo de la imagen de flecha (por código CSS). Ahora vamos al código CSS:
body {
margin: 0 auto;
padding: 0;
width: 570px;
font: 75%/120% Arial, Helvetica, sans-serif;
}
a:focus {
outline: none;
}
#panel {
background: #754c24;
height: 200px;
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;
}
Ahora vamos al código HTML que debes colocar:
<div id="panel"> <!-- Aqui el contenido --> </div> <p class="slide"><a href="#" class="btn-slide">Mostrar Slide</a></p>
El resultado de todo este código será lo siguiente:
[...] hacer funcionar este bello efecto en jQuery al igual que en Simple Slide Panel, lo que debemos hacer primero es descargar una copia de jQuery e insertarlo en el HTML de tu [...]
