SummArg | Cursos y recursos para webmasters

21/03/2011

MobilyBlocks: Convertí tus listas desordenadas en animaciones circulares.

Ideales para hacer llamativo cualquier menú o bien para ahorrar un poco de espacio, este plugin para jQuery convierte nuestras listas en una bonita animación.

Descargar | Demo

El primer paso es descargar el script y vincular los archivos .js a nuestro documento colocando las siguientes líneas entre etiquetas <head>

<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/mobilyblocks.js" type="text/javascript"></script>

Luego colocamos nuestro menu en forma de lista desordenada de la siguiente manera:

<div class="socials">
			<ul class="reset">
				<li><a href="#"><img src="img/socials/delicious.png" alt="" /></a></li>
				<li><a href="#"><img src="img/socials/digg.png" alt="" /></a></li>
				<li><a href="#"><img src="img/socials/google.png" alt="" /></a></li>
				<li><a href="#"><img src="img/socials/stumbleupon.png" alt="" /></a></li>
				<li><a href="#"><img src="img/socials/technorati.png" alt="" /></a></li>
				<li><a href="#"><img src="img/socials/twitter.png" alt="" /></a></li>
			</ul>
		</div>

Finalmente inicializamos el script apuntando a la clase socials.

<script>
$(function(){
	$('.socials').mobilyblocks();
});
</script>

Dejar un comentario