jQuery Circle Navigation

Question

I have a requirement to have a universe type menu, where there is a main item in the center, and "X" amount of items around it. (ie: sun with planets).

I have searched high and low for an example, and all of the search results points to using css, but this requires manually figuring out the position of the items.

How can I create a menu like this where I can dynamically add items?

I am sure there is some jQuery / javascript example somewhere

Answer 1

Did you try searching for pie menus? There are a couple of jQuery Plugins:

• jQuery - Pie Menu
• jQuery Canvas Pie Menu

Answer 2

查看jQuery Radmenu- http: //tikku.com/jquery-radmenu-plugin

Answer 3

I've just done a hell of lot of googling for you - but couldn't find anything either.

So, the answer must be - write it for yourself (see, that's fun!).
I found this great resource to help out. It's not JavaScript, but the code could easily be rewritten to help drawing the invisible circle needed to do the trick.

Some sin/cos stuff will probably also be needed - to determine where on the circle your menu points should be, dynamically. It's unfortunately not just as simple as saying 360/numberOfMenus ;-)

I hope this helps you out. Sometimes, the answer is that you have to do it yourself :D

Answer 4

I found this thread too late, because I also built one. You can find it here: http://www.pritaeas.net/public/jquery/hp/circulate/index.html

It is a jQuery plugin, very small, that positions li items in a circle.