Píldoras jQuery II – Barra lateral deslizante

Seguimos con la segunda entrega de las pequeñas píldoras jQuery. En esta entrega vamos a crear una barra lateral deslizante. El código completo del ejemplo puede ser descargado aquí.

El HTML, ya que el resto de la página está vacía es muy sencillo.

El posicionamiento de esa barra, los bordes y los colores lo haremos con CSS. Es también una hoja de estilos muy sencilla.

Una vez ya tenemos todo colacado y con la apariencia que queremos podemos empezar a utilizar jQuery para modificar y hacer la página web y el DOM interactivo. El script que vamos a necesitar lo colocaremos justo antes de cerrar la etiqueta body y será el siguiente:

Y esto es todo. En el próximo capítulo veremos como hacer el típico efecto “acordeón” con varios contenidos en una misma página.