Panel horizontal deslizante con JQuery

Horizontal Panel Sliding es un script para JQuery muy interesante que generara un panel con enlaces que podemos desplegar y contraer con un efecto de animación.

Primero, vamos a agregar la librería antes de </head>:

<script src="http://www.google.com/jsapi"></script>
<script>
  google.load("jquery", "1.3.2");
</script>

Y como requiere un plugin extra llamado jQuery Easing, lo descargamos y lo alojamos en un servidor externo:

<script type='text/javascript' src='URL_jquery.easing.1.3.js' />

o lo agregamos copiando y pegando su contenido:

<script type='text/javascript'>
//<![CDATA[
  ... aquí pegamos el contenido del archivo ...
//]]>
</script>

y luego, el script del panel:

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
  $("a#controlbtn").click(function(e) {
    e.preventDefault();
    var slidepx=$("div#linkblock").width() + 10;
    if ( !$("div#maincontent").is(':animated') ) { 
      if (parseInt($("div#maincontent").css('marginLeft'), 10) < slidepx) {
        $(this).removeClass('close').html('Ocultar');
        margin = "+=" + slidepx;
      } else {
        $(this).addClass('close').html('Mostrar');
        margin = "-=" + slidepx;
      }
      $("div#maincontent").animate({ 
        marginLeft: margin
      }, {
        duration: 'slow',
        easing: 'easeOutQuint'
      });
    } 
  }); 
});
//]]>
</script>

El CSS es lo que nos permitirá personalizarlo:

<style type='text/css'>
div#wrap { /* es el rectángulo conteendor */
  margin: 0 auto;
  overflow: hidden; /* esta propeidad es importante */
  position: relative;
  width: 100%;
}
#controlbtn { /* el área superior con Mostrar/Ocultar */
-moz-border-radius-bottomright: 20px;
-moz-border-radius-topright: 20px;
background-color: #345;
padding: 2px 10px;
}
a#controlbtn { /* el texto del enlace Mostrar/Ocultar */
  color: #DEF;
  display: inline-block;
  padding-left: 25px;
  text-decoration: none;
}
a#controlbtn.open { /* la imagen para Mostrar */
  background: transparent url(URL_imagen_MENOS) no-repeat left center;
}
a#controlbtn.close { /* la imagen para Ocultar */
  background: transparent url(URL_imagen_MAS) no-repeat left center;
}
div#maincontent { /* el rectángulo inferior */
  margin-left: 145px;
  position: relative;
}
div#linkblock { /* el rectángulo izquierdo con los enlaces */
  border-right: 1px solid #345;
  float: left;
  margin-left: -145px; /* el valor negativo del margen de div#maincontent */
  width: 125px; /* el ancho contmplando cierto margen */
}
h4 { /* el título */
  clear: none;
  color: #667788;
  font-family: Century Gothic;
  font-size: 22px;
  font-weight: normal;
  letter-spacing: -1px;
  line-height: 1.5;
  margin: 0;
}
#yourlist { /* la lista con las referencias */
  list-style: none;
  margin: 0;
  padding: 0;
}
#yourlist li { /* cada item de la lista */
  margin: 0 0 2px 0;
  padding: 3px 0 3px 10px;
  position: relative;
}
#yourlist li a { /* cada item es un enlace */
  color: #ABC;
  font-family: Tahoma;
  font-size: 17px;
}
#yourlist li a:hover { /* efecto hover */
  color: #BCD;
}
#maincontent p { /* el contenido del rectángulo derecho */
  color: #999;
  font-family: Arial
  font-size: 12px;
}
</style>