SummArg | Cursos y recursos para webmasters

29/01/2011

Cómo crear una barra animada para compartir una entrada en redes sociales?

Sixrevisions presentó un tutorial detallando los pasos para crear un menu de marcadores sociales (Bookmark or Share this post) utilizando jQuery para animar la botonera.

Existen dos versiones del menú, aquí colocaremos una de ellas con algunas aclaraciones nuestras, la otra versión y los archivos de descarga deben buscarlos en Sixrevisions.

Versión vertical del menu

El marcado HTML es muy simple para lograr este menu vertical:

<div id="social_nav_horizontal">
  <h3> Bookmark or Share This Post </h3>
  <ul>
    <li><a class="delicious" href="http://del.icio.us/post?url=Your website title" title="Bookmark on del.icio.us">Delicious</a>
    <li><a class="facebook" href="http://www.facebook.com/sharer.php?u=http://yourwebsite.com"  title="Share this on Facebook" >Facebook</a></li>
    <li><a class="stumbleupon" href="http://www.stumbleupon.com/submit? url=http://www.yoursite.com/" title="Stumble This Page" > Stumble</a></li>
    <li><a class="twitter" href="http://twitter.com/home?status=Your Website Title- http://yourwebsite.com@TwitterUserName" title="Tweet This Page" >Twitter</a></li>
  </ul>
</div>

Ahora le agregaremos el CSS para que tome la forma que muestra el segundo menú de la imagen.

#social_nav_horizontal {
  margin-left: 100px;
  font-family: Futura, Verdana, Sans-Serif;
  font-size: 18px;
  color: #8e9090;
}
#social_nav_horizontal h3 {
  display:inline;
  padding: 0px 10px;
  border-bottom:dashed 1px #ccc;
}
#social_nav_horizontal ul {
  margin: 0;
  padding: 0;
  margin-top:20px;
}
#social_nav_horizontal ul li {
  padding: 5px 0 0 5px;
  margin-left: 5px;
  list-style-type: none;
}
#social_nav_horizontal ul li a {
  padding: 4px 0 0 28px;
  height: 32px;
  color: #999;
  text-decoration: none;
  line-height: 1.45em;
}

El último padding, que tiene un valor de 28px a la izquierda (¿leyeron la regla del reloj para recordar el orden?), se encarga de dejar libre el espacio para los íconos. El background-position variará dependiendo del tamaño de ícono que utilicen. Pueden descargar alguno de la sección freebies de sixrevisions.

.delicious {
  background:url(images/delicious.png) no-repeat;
  background-position:0px -1px;
}
.facebook {
  background:url(images/facebook.png) no-repeat;
  background-position:0px -1px;
}
.stumbleupon {
  background:url(images/stumbleupon.png) no-repeat;
  background-position:0px -1px;
}
.twitter {
  background:url(images/twitter.png) no-repeat;
  background-position:0px -1px;
}

Finalmente se debe linkear la librería jQuery y se configura la animación. Entre etiquetas <head> colocar:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="javascript">
$(document).ready(function() {
  $('#social_nav_vertical li a').hover(
  // al pasar el puntero mover a la izquierda 20px en 300 milisegundos
  function() {
    $(this).stop().animate({ marginLeft: '20px' },300);
  },
  // al sacar el puntero retornar a la posición original a la misma velocidad
  function() {
    $(this).stop().animate({ marginLeft: '0px' }, 300);
  });
});
</script>

Demo | Descargar

Dejar un comentario