CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Alex
Alex

Reputation: 35801

How do you create a round navigation system?

I need to create a round navigation system, similar to the round nav button on an iPod Touch (see image here: http://www.flickr.com/photos/37476174@N06/4668497237/).

It needs to be JavaScript-based (not Flash). It would have different menu items around the dial. It also needs to be small (around 300px in diameter). Does such a JavaScript component already exist? Thanks.

Upvotes: 0

Views: 647

Answers (2)

Kevin Sedgley
Kevin Sedgley

Reputation: 1069

Here's a couple of examples that may help: CSSPlay and Fish Eye navigation and Circular navigation

Having said all this I've never played on an ipod enough to remember how it's done!

Upvotes: 4

Pointy
Pointy

Reputation: 413702

There are many ways to do this. In modern browsers that support CSS rounded corners, you could probably do it without any additional image files, but you could also have a simple circular image as a background. Then you'd position some clickable elements with transparent backgrounds and white/black/purple/whatever text for the buttons.

Mouse drag around the circle would be possible and a fun project but probably not trivial (mouse dragging always has some quirks.)

I've never seen a jQuery plugin for such a thing but I wouldn't be surprised if one exists. However, if it's just clickables around a circle, that wouldn't be too hard. Javascript supports all the trig functions you'd need.

Upvotes: 2

Related Questions