» Publicación:
24 Julio 2011
/
Categoría:

Un atractiva alternativa con Simple Slide Panel

¿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>).

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:

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:

Ahora vamos al código HTML que debes colocar:

El resultado de todo este código será lo siguiente:

Ver demo

  • Facebook
  • Twitter
  • Tumblr
  • Digg
  • Reddit
  • LinkedIn
  • Google Bookmarks
  • E-Mail
Etiquetas
» Sobre el autor: Reckless
Joven chileno de 29 años, con un paso por la escuela de Ingenieria de la UNAB, que dejo a medio camino para tomar la carrera de Diseñador Gráfico Profesional en la Universidad Santo Tomás, que era lo que siempre busco desde los 12 años. Fanático de la Universidad de Chile, el Metal y el Hardrock. Actualmente trabajando como Diseñador & Desarrolador Web para Especiales de Emol.com, ademas de "Freelancear" cuando se puede.
Comentarios

[…] 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 […]

Fecha del comentario: 31 Julio 2011 a las 1:53
Escribe tú comentario
*
*
» Mensaje: