¡Hola! Me parece que andas usando un bloqueador de anuncios =( ¿Nos desbloqueas? ¿Por qué?
F13

Funcion 13

Panel deslizable horizontal con jQuery

La semana pasada me vi en la necesidad de añadir una nueva funcionalidad a un panel informativo. La funcionalidad, en principio, era sencilla. Dar la posibilidad de seleccionar fechas en el panel informativo, para que sacara información de las fechas elegidas o del día en cuestión, en tiempo real. El caso es que, como no quería tocar mucho la distribución, me animé a meterlo en un panel que se deslizara de forma horizontal.

Increíblemente, no encontré mucha información sobre esto en la red. Lo común es hacerlo vertical, no me preguntéis porqué. Así que, después de haberlo hecho, me ha parecido interesante compartirlo por si alguien quiere utilizarlo.

Comencemos…

El HTML

<!-- Botón que activa el panel -->  
<a href="#" id="abre_tab">  
  <div id="tab"> 
    <div id="tab_interna"></div> 
  </div> 
</a>  
<!-- Panel oculto -->  
<div id="panel">  
  <div class="contenido">
    <h3>Contenido</h3>
  </div>
</div>  

El HTML es realmente sencillo de entender.

Tenemos un enlace con dos div dentro. La segunda es totalmente opcional aunque, para el diseño, queda bien como pronto podremos comprobar.

Lo siguiente es el panel que alberga nuestro contenido oculto. En este caso he dejado solo algo de texto para que se aprecie, pero originalmente tenía un formulario en su interior.

El CSS

#tab {
  width: 40px;
  height: 50px;
  position: absolute;
  right: 0;
  top: 25px;
  display: block;
  cursor: pointer;
  background-color: #232526;
  border-radius: 10px 0 0 10px;
  padding: 5px 0 5px 5px;
}
#tab_interna {
  border-radius: 5px 0 0 5px;
  width: 100%;
  height: 100%;
  background: #CCC url('images/arrow_posts_left.png') no-repeat center center;
}
#tab_interna:hover {
  background-position: 5px 13px;
}
.expandida {
  background: #CCC url('images/arrow_posts_right.png') no-repeat center center !important;
}
.expandida:hover {
  background-position: 11px 13px !important;
}
#panel {
  position: absolute;
  right: 0;
  top: 25px;
  background-color: #CCC;
  height: 250px;
  width: 0;
  font: 18px Arial;
  color: #707275;
  text-align: center;
  border-radius: 0 0 0 15px;
}
#panel h3 {
  margin: 0;
  margin-bottom: 15px;
  text-transform: uppercase;
}
#panel .content {
  width: 320px;
  margin: 5px auto;
}

Del CSS no tengo mucho que decir y cabe destacar que está adaptado al diseño que yo tenía del panel. En este caso, el panel se desplegará desde la derecha hacia la izquierda. Si quieres invertir el efecto, cambia la línea destacada, en vez de usar la propiedad right, usa la propiedad left para que quede en ese lado.

La otra línea destacada es la posición. Podéis optar entre absolute y fixed, para que vaya desplazándose mientras hacemos el scroll.

El JavaScript con jQuery

(function($) {
  var $contenido = $(".contenido").hide(),
    $tab = $('#tab'),
    $tab_interna = $('#tab_interna'),
    $panel = $('#panel') $abre_tab = $('a#abre_tab');

  $abre_tab.on('click', function(e) {
    e.preventDefault();
  });

  $tab.toggle(function() {
    $tab.stop().animate({
      right: "400px"
    }, 500, function() {
      $tab_interna.addClass('expandida');
    });

    $panel.stop().animate({
      width: "400px",
      opacity: 0.8
    }, 500, function() {
      $contenido.fadeIn('slow');
    });
  }, function() {
    $contenido.fadeOut('slow', function() {
      $tab.stop().animate({
        right: "0"
      }, 500, function() {
        $tab_interna.removeClass();
      });
      $panel.stop().animate({
        width: "0",
        opacity: 0.1
      }, 500);
    });
  });
})(jQuery);

Vamos por partes. Lo primero de lo que nos encargamos es de “cachear” los objetos que vamos a utilizar y a meterlos en variables para cuando los necesitemos.

Posteriormente, evitamos cualquier acción del enlace que abre la pestaña.

Ahora vamos con la función que nos interesa. Nos quedamos con la función toggle que asociamos al objeto $tab. Hay 2 funciones anónimas, una para mostrar la pestaña y otra para ocultarla. A la hora de mostrarla, lo primero que hacemos es parar cualquier animación con stop(). Posteriormente, iniciamos una animación de la propiedad right a 400px de manera que se desplaza hacia la izquierda. Una vez la animación termine, añadimos a la pestaña la clase extendida para poder cambiar el icono acordemente. A la misma vez, animamos el ancho del panel 400px (tenía 0) mostrando el contenido que estaba oculto.

Cuando volvemos a pulsar sobre la pestaña, ocurre el proceso inverso y vuelve a quedar todo oculto.

En la demo puedes observar dos versiones de la pestaña, una que está cerrada en el inicio y otra que está abierta en el inicio. Dado que el código es similar (hay que darle la vuelta a todo), no me ha parecido necesario incluirlo en el artículo.

Si el artículo te pareció interesante, útil o incluso equivocado, por favor considera el dejar un comentario. ¡Lo apreciaré mucho!

Programador Front-end en First + Third y Potato. Trabajando con JavaScript y HTML5 desde el corazón de Sevilla.

Comentarios ¡Únete a la conversación!