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.
What makes pie menus good? How about making a pie menu with JavaScript?
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.
JavaScripted pie menus
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.
Do note that the code is probably not particularily suited for anything out-of-the-box… There are some things like hardcoded values for leaf sizes, it doesn’t have animations or anything nice you might want… but it should be relatively simple to add these if you know JavaScript.
Basic usage
<script type="text/javascript" src="jquery-1.2.1.min.js"></script>
<script type="text/javascript" src="PieMenu.js"></script>
<style type="text/css">
/* define piemenu styles */
.pieMenu {
width: 50px;
height: 50px;
border: 2px solid black;
position: absolute;
background: white;
}
/* root node style */
.pieMenu.root {
font-weight: bold;
}
</style>
<script type="text/javascript">
var menu;
$(document).ready(function(){
//Define a menu
menu = new CU.PieMenu.Leaf('Root');
//Add root style to element
menu.element.addClass('root');
//Add a sub-element which links to www.opera.com
menu.addNeighbor('left', new CU.PieMenu.Leaf('Visit Opera', 'http://www.opera.com'));
//Add some more leafs
menu.addNeighbor('top', new CU.PieMenu.Leaf('Top'));
menu.addNeighbor('bottom', new CU.PieMenu.Leaf('Bottom'));
//Add a leaf with a sub-sub-item
var leaf = new CU.PieMenu.Leaf('Right');
leaf.addNeighbor('right', new CU.PieMenu.Leaf('Right 2'));
menu.addNeighbor('right', leaf);
});
</script>
<a href="#" onclick="CU.PieMenu.show(menu, event)">Show piemenu</a> |
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.
Conclusion
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