Loading...

Search jQuery

Search

jQuery Forum

Getting Started

animation menu

in Getting Started • 10 years ago

http://jsfiddle.net/rajkumart08/p5VQS/1/

how to transfer this menu into semi circular menu...

pls help....

i am giving u the screens hot too...

https://docs.google.com/open?id=0B3IBJKENGE7RQjZVNXhoN0NtNUE

1

Replies(5)

creativecouple

Re: animation menu

10 years ago

This is not question about jQuery and neither about Zepto.

It's a math question about how to compute the CSS transform params for the menu items.

Have fun!
- creativecouple

creativecouple

Re: animation menu

10 years ago

Take a look at http://jsfiddle.net/creativecouple/p5VQS/2/

var $menu_items = $('#demo2 li'),
menu_size = $menu_items.length;
$menu_items.each(function(i){
var $this = $(this),
angle = (i+1)*180/(menu_size+1)-90,
radius = $this.height()/2,
transform = 'rotate('+angle+'deg) translateY(-'+radius+'px)';
$.each(['','-o-','-moz-','-ms-','-webkit-'], function(x,prefix){
$this.css(prefix+'transform',transform);
});
});

Have fun!
- creativecouple

Re: animation menu

10 years ago

@Creativecouple

thanks for your reply...

but its working in mobile device

i am trying to work it on mobile device for past two weeks,..

can u pls say how to fix the bug....

creativecouple

Re: Re: animation menu

10 years ago

which bug do you mean?

Have fun!
- creativecouple

Re: animation menu

10 years ago

@creativecircle

the slider should work in iphone..

some problem here

$(document).ready(function()
{
$('#demo2').flickable({segments:4});
//$('#demo2 a').tap(function(){ alert('You just tapped "'+$(this).text()+'"'); });