playground.mobily.pl - marcin dziewulski

mobily.pl - marcin dziewulski - playground

Check out the new website with fresh and new jQuery plugins and tutorials!
Visit jscraft.net

MobilyBlocks

Posted by: Marcin Dziewulski on 12.12.10

jQuery plugin (2KB) that allows you to create an unordered list as an animated circle.

Changelog:

25.1.2011 - fixes for hover event, added direction option (clockwise or counter-clockwise)
8.1.2011 - added hover trigger
13.12.2010 - fixes for click event

JavaScript:

$('.blocks').mobilyblocks({
	trigger: 'click', // click or hover
	direction: 'clockwise', // clockwise or counter
	duration: 500, // duration of animation
	zIndex: 50, // z-index value of 'li' elements
	widthMultiplier: 1.15
});

HTML:

<div class="blocks">
	<ul class="reset">
		<li> .. </li>
		<li> .. </li>
		<li> .. </li>
		<!-- etc. -->
	</ul>			
</div>

CSS:

.blocks {
	display:block;
	width:;
	height:; /* you need to specify width and height values */
	position:relative;
	cursor:pointer;
}

ul.reset,
ul.reset li {
	display:block;
	list-style:none;
	padding:0;
	margin:0;
}

ul.reset li {
	position:absolute;
}