Pie, just like pie menus, is great.
What is a “pie menu”? If you don’t play games, you might not be very familiar with this great type of menu, as it isn’t really used anywhere outside games as far as I know.
Pie menu is a menu, which opens around your cursor, or crosshair in games, and shows menu items around it in a pie-slice like fashion.
Why a pie menu?
Pie menus have some good points, other than reminding you about pie too. ;)
Pie menus can be very easy to use. Rather than having to choose the third menu option, you can simply move your mouse to left of the initial position. This can make it much nicer to interact with things, as you won’t need to move the mouse as much.
It can also be a very quick way of accessing options if done properly. If you have a pie menu with some specific choices, such as “Send Message” or “Add to friends”, you should always keep them in the same locations.
As the user gets accustomed to the menu, they start to remember which part of the menu contains which action, just like with traditional menus. Thanks to the bigger hit area of the typical pie menu, it’s much easier to quickly select some option from it. This is also enhanced by the fact that most games will limit the movement of the cursor to the area of the pie menu when it’s active, but this is not really possible (or even wise!) in the context of web.
So with the above we can pretty much say that pie menus are a nice refreshing approach to displaying choices to the user.
What about the web? Could we get a nice pie menu for a website? Why not!
Since I like pie menus so much, I decided to try out making some JS objects for building and displaying such things. It also served as an excercise on jQuery, which I wanted to test.
I’ve uploaded the code for the JS pie menu to the Svn repository, download the script here.
The script basically consists of two parts: CU.PieMenu and CU.PieMenu.Leaf
CU.PieMenu is the main “controller” object which handles showing the menu, positioning it on top of where you clicked and hiding it when you move the mouse away from it. CU.PieMenu.Leaf is the actual object which is used to build the menu.
Running the above code will produce:
Clicking the “Show piemenu” link should display a working menu with four leafs, one taking to Opera.com and one having a sub-leaf.
The menu is pretty ugly with a basic stylesheet like this, but with a nice background-graphic it might look quite good even without any additional code.
Who doesn’t like pie… menus? They’re easy and quick to use!
If you get inspired by this to write your own pie-menu implementation in JS or know a nice one, drop me a line. :D