TIKKU.COM Home Page   »   jQuery Plugins   »   Radmenu Plugin

jQuery Radmenu Plugin v1.0.0 / May 14, 2010

Overview

A Radial Menu, also known as a Pie Menu, is a circular contextual menu. The interface is a pretty cool and intuitive one and is now easy to implement on your site!

Radial menu's are powerful primarily because the location of the menu items can be easily memorized by novice users, as well as experienced ones. The interface effectively engages users in a way in which they are capable of placing directional and gestural associations with particular actions; think muscle memory.

This plugin was created to harness the power of the radial menu and yet provide enough flexibility to the developer to express their creativity in its application. The radmenu plugin essentially builds items around the circumference of a circle. This is done by using unit circle trigonometry, where a simple calculation
x1 = x0 + (Math.cos(angle) * Radius),
y1 = y0 + (Math.sin(angle) * Radius)
allows us to grab the x and y coordinates that the elements are to be positioned; since the elements are absolutely positioned. When building the items in the list, each item is given its particular 'portion' of the pie - ( (element # / # elements) * 2 * Math.PI ) - which leads to an equal distribution of the elements.

The plugin provides the following API - Showing and Hiding the menu on any specified event, Rotating the menu clockwise & counter-clockwise, shuffle the menu items randomly (fireworks-esque effect), specify a custom event to occur after an animation (i.e. clockwise/anticlockwise/shuffling) and performing some function when selecting a radmenu item.

The options that can be set are - The class of the markup containing your list items (listClass), the class of the markup that represents your active element (itemClass), an active class when a radmenu item has been selected (activeItemClass), the radius you want to build the radial menu around, a particular angular offset if you have a desired angle at which you would like the items to be visible, specific center axis (x,y) coordinates of the circle that the radmenu items are built around, and the speed of the animations.

If you have any comments, suggestions, or need/want help implementing this plugin - please feel free to email me @ ntikku@gmail.com or tweet me @ntikku . Also, if you do end up implementing this plugin, I would greatly appreciate it if you would send a link over - I'd love to see it in action!

Thanks,
Nirvana Tikku

Latest implementations..

Quick Demo

Open Radial Menu
 


Quick Start Guide

 
1     Create a list   (any markup is acceptable, since the plugin utilizes classes to associate items)

<html>	
<body>
<div id='radial_container'>
	<ul class='list'>
		<li class='item'>	<div class='my_class'>  0  </div>	</li>
		<li class='item'>	<div class='my_class'>  1  </div>	</li>
		<li class='item'>	<div class='my_class'>  2  </div>	</li>
		<li class='item'>	<div class='my_class'>  3  </div>	</li>
		<li class='item'>	<div class='my_class'>  4  </div>	</li>
		<li class='item'>	<div class='my_class'>  5  </div>	</li>
		<li class='item'>	<div class='my_class'>  6  </div>	</li>
		<li class='item'>	<div class='my_class'>  7  </div>	</li>
		<li class='item'>	<div class='my_class'>  8  </div>	</li>
		<li class='item'>	<div class='my_class'>  9  </div>	</li>
	</ul>
</div>
</body>
</html>

 
2     Include the JavaScript 

<script type='text/javascript' src='{your_path_to}/jQuery.radmenu.js'></script>

 
3     Include the CSS 

#radial_container { 
	position:relative; 
	left:425px; 
	top: 75px; 
	width:100px; 
	height:100px; 
	text-align:center;
}
.radial_div_item {
	background-color:none;
	height:30px;
	padding:10px;
	color:#234;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	cursor:pointer;
}
.radial_div_item.active { 
	background-color:#511; color:white;
	padding: 10px; 
	-moz-border-radius:40px;
	z-index:100;
}
.my_class { 
	font-size:1.5em; 
	color:#abc;
	background-color:#def;
	-moz-border-radius:30px;
	width:30px;
	height:30px;
	-webkit-border-radius:30px;
}

 
4     Initialize the Radial Menu in JavaScript 

jQuery("#radial_container").radmenu({
	listClass: 'list', // the list class to look within for items
	itemClass: 'item', // the items - NOTE: the HTML inside the item is copied into the menu item
	radius: 100, // radius in pixels
	animSpeed:400, // animation speed in millis
	centerX: 30, // the center x axis offset
	centerY: 100, // the center y axis offset
	selectEvent: "click", // the select event (click)
	onSelect: function($selected){ // show what is returned 
		alert("you clicked on .. " + $selected.index());
	},
	angleOffset: 0 // in degrees
});

 
5     Hook the radmenu's events to any elements you want to use as triggers 

<a href="#" onClick='jQuery("#radial_container").radmenu("show")'> Show Menu </a>
<a href="#" onClick='jQuery("#radial_container").radmenu("hide")'> Hide Menu </a>
<a href="#" onClick='jQuery("#radial_container").radmenu("next")'> Rotate Menu Clockwise </a>
<a href="#" onClick='jQuery("#radial_container").radmenu("prev")'> Rotate Menu Anti-Clockwise </a>
<a href="#" onClick='jQuery("#radial_container").radmenu("shuffle")'> Shuffle Items in the Menu </a>

Options / Defaults

The plugin's defaults are -- 

var defaults = {
	listClass: "list", // the class of the list containing the menu items
	itemClass: "item", // the classes on the menu items 
	activeItemClass: "active", // the class put on the active element in the menu
	selectEvent: null, // click, mouseenter, custom etc, a event to be bound
	onSelect: function($selected){}, // when selections occur, $selected is passed to this method
	radius: 10, // in pixels the radius of the menu
	initialScale: 1,  // initial scale factor of radius
	angleOffset: 0, // in degrees the angle that the elements are offset at
	centerX: 0, // the center x coordinate
	centerY: 0, // the center y coordinate
	animSpeed: 500, // the speed of animation when next/prev/shuffle
	animEasing: "swing", // the type of easing used when animating the raditems
	scaleAnimSpeed: 0, // the speed of animation when scaling
	scaleAnimEasing: "swing", // the type of easing used when animating
	scaleAnimOpts: {}, // the animation options you desire to apply to scaling
	afterAnimation: function($m){}, // after the animation occurs, passing the 'menu' package
	onShow: function($items){$items.show();}, // on show, the items are passed in - default show() is called
	onHide: function($items){$items.hide();} // on hide, the items are passed in - default hide() is called,
	onNext: function($items){return true;}, // condition for the next event
	onPrev: function($items){return true;} // condition for the prev event,
	onScaleItem: function($item, scaleFactor, coords){} // when scaling item, the item, the factor being applied and the new position coordinates are passed through,
	rotate: false, // if you want the items to be rotated 
	getRotation: function(degrees, index, numItems){return degrees;} // specify a specific angle for the rotation items
};

listClass

By default, the radmenu plugin looks for the class "list" to build the menuitems. Since the plugin looks for classes, you can use any markup that you wish to represent the menu. This is useful when the user does not have javascript, and you want the menu to degrade appropriately.

itemClass

By default, the radmenu plugin looks for the classes within listClass, that have the "item" class. This means that if you do NOT want any menuitems to be visible with the radmenu plugin, simply do not utilize the same class that you would on other items that you do want in the menu.

activeItemClass

Upon selection of a menu item (NOTE: selectEvent must be set), this class is placed on the containing radial menu element. Following the addition of the class, the onSelect event is triggered. 

selectEvent

By default, selectEvent is null in the plugin. This means that to have a select event triggered on the menu items, you must specify the event that you want. Note that this can be any of the dom events, like "click", "dblclick", "mouseenter" etc.. If this is not set, a selection will be meaningless on the radial menu.

onSelect

After the selection event is triggered, you are given an 'onSelect' method that is passed the selected item. This allows you, the developer, to have control of what happens upon the selection event, outside of the typical class addition (Note: see 'selectEvent'). This method is passes the $selected object, which represents the radial item that the user clicked on. Inside it you will have the HTML that you had described in the list items. You can use this to decide what object was selected.

radius

The radius represents the size of the radial menu that you desire. Of course the radius is somewhat depdendent on how many elements you have, but you are given full control. This is by default set to 10 which means that when the 'circle' is being drawn, a radius of 10 will be used to describe how far out the elements are to go.

angleOffset

By default, we do not offset the angle with which the elements are created. If you desire to have the items at any particular offset, simply pass in a value in degrees.

centerX

The radmenu plugin basically takes the elements within the list and uses the HTML within them to build the radial menu. The radial menu is positioned absolutely, which means that there is an opportunity for the developer to describe where the radial menu will 'appear'. The centerX is set to 0 by default, and can be modified to offset the menu using the CSS "left" attribute.

centerY

Similar to centerX, centerY allows you to describe where, on the Y axis, the radial menu is to appear upon showing it.

animSpeed

The way that the radial menu rotates clockwise/counterclockwise or shuffling, is by utilizing jQuery's animate feature. As a result, the animation can be told how fast the animation is required to occur. As per usual, use millis here to represent how long you want the animaton. Note: 0 is immediate, 200 is reasonably fast, 400 is normal and 800 is reasonably slow.

animEasing

How about getting nice with the rotation itself? "swing" and "linear" as default jQuery options and look pretty neat. Try "easeOutBounce" if you use the easing plugin, it gives the menu's rotation a nice effect.

scaleAnimSpeed

When scaling the diameter of the circle the animation that occurs is passed in an animation speed. The default speed is "normal" i.e. 400ms, and can be extended via specifying this option.

scaleAnimOpts

This object is merged with the LEFT and TOP CSS attributes (the positioning coordinates essentially) and is passed into the animate function. If you want any additional CSS to be applied whilst performing the animation, you will want to add it as an option onto this object. By default it is empty ({}). If you want to do something as the item is scaled, be sure to check out "onScaleItem" below.

afterAnimation

After the animation occurs, you may want to perform some operation. i.e. after the rotation counter clockwise you may want to select the new element that is in the original place. You would need to have the ability to perform this after the animation; this method is passed a $m object - the menu package. In this package you can select: $m.menu = the menu, $m.opts = the options it was init'd with and $m.raditems() = the radial menu items.

onShow

To have control over the effect of showing the items, the onShow method is called to trigger the actual showing of the radial items. The method is passed the jquery array of radial menu items. If not specified, the default is simply calling the standard jquery "show()" method on it.

onHide

To have control over how the radial menu collapses, the onHide method is called before the menu container is removed. Similarly to onShow, the onHide method is also passed in the jquery array of menu items; and if undefined will be defaulted to the standard "hide()" method.

onNext

This method allows control over the next event (whether it occurs or not). By default the method returns true. If this method was to return false, the next animation would NOT occur.

onPrev

This method allows control over the prev event (whether it occurs or not). By default the method returns true. If this method was to return false, the prev animation would NOT occur.

onScaleItem

When scaling the radmenu, you may desire to perform additional changes while coordinate shifting. i.e. If you would like to modify the font size and have it be tied to the scale factor you will want to piggy back onto this function. This method is passed the jQuery object of the particular item, the scaleFactor that is being applied and the coordinates that the left and top positions of the radmenu item are being updated to. For example: You can do something like, $item.css("font-size", factor+"em");

rotate

A simple boolean flag that tells the radial menu whether or not to rotate the items that it distributes. The rotation is performed via utilizing CSS3 and is supported on Safari, Chrome, IE9+, Opera 11+ and Mozilla 3.5+

getRotation

Rotation is a useful function of the radial menu, however sometimes you want to control the angle to which the rotation actually occurs. The getRotation method is passed in the angle in degrees, the index of the current item as well as the number of items being distributed. You can perform the appropriate math and RETURN a value in degrees, which will then be utilized in the transform. Note: by default, the degrees that are passed in to that method, are returned.

Radial Menu Options

In order to get control of the container of the radial menu, you will want to extend the following options. By default the values are - 

	$.radmenu = {
		container: {
			clz: "radial_div", // the radmenu container class
			itemClz: "radial_div_item", // the class to be applied to each menu item
			html: "<div></div>", // the container html (without the class)
			css: { "position": "relative" } // the css applied to the radial div container 
		}
	};

Events

There are a set of events that are bound to radmenu's upon initialization. These events can be called directly by passing in a string argument, the event, to trigger the event on the menu. Some events may require arguments, in which case pass the arguments as well.

Show

Take the defined list items and create a radial menu with the HTML within them. This radial menu is housed within an absolutely positioned div. The class on this div is '$.radmenu.container.clz' and the item class is '$.radmenu.container.itemClz'. By default, the div container class is radial_div and the item class is radial_div_item.

The show event if triggered over and over, will reset the radial menu to its initial state. Note, the 'show' mechanism is the onShow method.

NOTE: if you pass in a function on the show method, you can override the default 'onShow' method defined. 
jQuery("#radial_menu").radmenu("show");

    or

jQuery("#radial_menu").radmenu("show", 
	function(items){
		items.fadeIn(1000);
	});

Hide

Take the wrapped list items and remove the radial menu. The onHide method is the trigger for hiding the menu items.
jQuery("#radial_menu").radmenu("hide");

Next

Perform a rotation clockwise. NOTE: The "next" method triggers the "onNext" method. If the onNext method returns false the rotation will not be performed. However, if the onNext method returns true, the rotation will occur. 
jQuery("#radial_menu").radmenu("next");

Prev

Perform a rotation counter clockwise. NOTE: The "prev" method triggers the "onPrev" method. If the onNext method returns false the rotation will not be performed. However, if the onNext method returns true, the rotation will occur. 
jQuery("#radial_menu").radmenu("prev");

Shuffle

Shuffle up the elements randomly. Each time shuffle is called, the items get shuffled one element at a time. This means that if you call shuffle on the items, you will be rearranging the radial menu items visible, not the underlying elements that the radial menu was created from. 
jQuery("#radial_menu").radmenu("shuffle");

Select

Selecting a menu item is contingent upon setting the "selectEvent" and "onSelect" attributes being set.
If set, upon the "selectEvent"'s trigger on the list item, the onSelect method will get called in addition to an active class being set on the menu item. The onSelect method receives the selected element which you can use to perform your selection.


Note: you can select an item by triggering a 'select' event, however you can also more simply pass a numeric value (representing the index of the item you want to select). 
jQuery("#radial_menu").radmenu("select", 0);
      or 
jQuery("#radial_menu").radmenu(0);

NOTE: If passing in a number, note that the selection is 0 (zero) based - i.e. the first element is 0. This simplifies selection of particular elements by using jQuery.index();

Scale

This method scales the radius of the radmenu. Whilst scaling the radmenu, the 'onSelectItem' method is called that can be extended in the initialized options. It is worth noting that the scale factor is performed on the options that the radmenu was initialized with. This means that returning to scale factor of 1 will return your radmenu to its original radius. However, once scaled differently, next/prev and shuffle will remain to perform on the new radius that has been scaled to. Also, negative scaling essentially flips the radmenu's items. 
jQuery("#radial_menu").radmenu("scale", 1.5);

Items

If you need to grab the radial menu items, you can use this convenience method and it will return a jQuery array of the radmenu items. 
jQuery("#radial_menu").radmenu("items");

Opts

If you need to grab the radial menu options, this method is a quick and easy way to do so. 
jQuery("#radial_menu").radmenu("opts");

Destroy

When you need to tear down the radial menu (if you need to re-initialize it, for example) then the destroy function will help unbind all radmenu events and nullify any local storage its using. 
jQuery("#radial_menu").radmenu("destroy");

Legal

MIT License

Code Samples

Show - jQuery('.radial_container').radmenu('show');
Hide - jQuery('.radial_container').radmenu('hide');
Prev - jQuery('.radial_container').radmenu('prev');
Next - jQuery('.radial_container').radmenu('next');
Shuffle - jQuery('.radial_container').radmenu('shuffle');
Scale to 0.5 - jQuery('.radial_container').radmenu('scale', 0.5);
Scale to 1.5 - jQuery('.radial_container').radmenu('scale', 1.5);
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

CSS

.radial_container { 
	position:relative; 
	left:125px; 
	top: 150px; 
	width:100px; 
	height:100px; 
	text-align:center;
}

.radial_div_item {
	background-color:none;
	width:75%;
	height:30px;
	padding:10px;
	color:#234;
}

.radial_div_item.active { 
	background-color:#511; 
	color:white;
	padding: 10px; 
	-webkit-border-radius:40px;
	-moz-border-radius:40px;
}

JavaScript

jQuery(".radial_container").radmenu({
	radius: 140,
	animSpeed:400,
	centerX: 30,
	centerY: -20,
	selectEvent: "click",
	rotate: true,
	onSelect: function($selected){
		alert($selected.html());
	},
	angleOffset: 0
});
Show Cogs - jQuery('.cog_1,.cog_2').radmenu('show');
« Prev | Hide | Next »
Clicking "next/prev" triggers the action on both cogs.
  • I
  • II
  • III
  • IV
  • V
  • IV
  • I
  • II
  • III
  • IV
  • V
  • VI
  • VII
  • VIII
  • IX
  • X
  • XI
  • XII

CSS

.cog_1 { 
	position:relative; 
	left:250px;
	top:50px;
}
.cog_2 { 
	position:relative; 
	left:100px;
	top:150px;
}
.radial_div_item {
	background-color:none;
	width:75%;
	height:30px;
	padding:10px;
	color:#234;
}

JavaScript

jQuery(".cog_1").radmenu({
	radius: 50,
	animSpeed:600,
	centerX: 70,
	centerY: 20,
	rotate: true,
	angleOffset: 0
});
jQuery(".cog_2").radmenu({
	radius: 100,
	animSpeed:400,
	centerX: 30,
	centerY: -20,
	rotate: true,
	angleOffset: 0
});
Start Clock Stop Clock
Click "Start Clock" to have this minimalist clock appear.
 
  • 00
  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
  • 08
  • 09
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 00
  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
  • 08
  • 09
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 12
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

Clock Code (JavaScript)

function startClock(){
	jQuery(".clock_seconds_hand, .clock_minute_hand, .clock_hour_hand")
		.radmenu("show");
	CLOCK = setInterval(function(){
		jQuery(".clock_seconds_hand")
			.radmenu(new Date().getSeconds());
		jQuery(".clock_minute_hand")
			.radmenu(new Date().getMinutes());
		jQuery(".clock_hour_hand")
			.radmenu((new Date().getHours())%12);
	}, 1000);
};

function stopClock(){ window.clearInterval(CLOCK); };

CSS

.clock_seconds_hand,
.clock_minute_hand,
.clock_hour_hand{
	position:relative; 
	left:125px; 
	top: 150px; 
	width:100px; 
	height:100px; 
	text-align:center;
}

.clock_seconds_hand .radial_div_item.active,
.clock_minute_hand .radial_div_item.active,
.clock_hour_hand .radial_div_item.active { 
	background-color:transparent;
	font-weight:bold;
}

JavaScript

jQuery(".clock_seconds_hand").radmenu({
	radius: 170,
	animSpeed:400,
	centerX: 40,
	centerY: 60,
	selectEvent: "click",
	angleOffset: -90
});

jQuery(".clock_minute_hand").radmenu({
	radius: 120,
	animSpeed:400,
	centerX: 40,
	centerY: -40,
	selectEvent: "click",
	angleOffset: -90
});

jQuery(".clock_hour_hand").radmenu({
	radius: 60,
	animSpeed: 800,
	centerX: 40,
	centerY: -130,
	selectEvent: "click",
	angleOffset: -90
});
You Selected:
Show - jQuery('#nested_container').radmenu('show');
Hide - jQuery('#nested_container').radmenu('hide');
Click on a menuitem to have its sub radial menu show/hide (it toggles). Click on a menu subitem to "select" it.

  • 0
    • 0.1
    • 0.2
    • 0.3
    • 0.4
    • 0.5
    • 0.6
    • 0.7
  • 1
    • 1.1
    • 1.2
    • 1.3
    • 1.4
    • 1.5
    • 1.6
    • 1.7
  • 2
    • 2.1
    • 2.2
    • 2.3
    • 2.4
    • 2.5
    • 2.6
    • 2.7
  • 3
    • 3.1
    • 3.2
    • 3.3
    • 3.4
    • 3.5
    • 3.6
    • 3.7
  • 4
    • 4.1
    • 4.2
    • 4.3
    • 4.4
    • 4.5
    • 4.6
    • 4.7
  • 5
    • 5.1
    • 5.2
    • 5.3
    • 5.4
    • 5.5
    • 5.6
    • 5.7
  • 6
    • 6.1
    • 6.2
    • 6.3
    • 6.4
    • 6.5
    • 6.6
    • 6.7

CSS

#nested_container { 
	position:relative; 
	left:170px; 
	top: 25px; 
	width:100px; 
	height:100px; 
	text-align:center;
}	
.list .item .sublist,
.sublist { 
	display:none;
}
.my_class_main,
.my_class_sub { 
	font-size:1.5em; 
	color:#123;
	background-color:#567;
	-moz-border-radius:30px;
	width:30px;
	height:30px;
	-webkit-border-radius:30px;
}

.my_class_sub { 
	background-color:#def;
	color:#123;
}

#nested_container .radial_div_item {
	background-color:none;
	height:30px;
	padding:10px;
	color:#234;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	cursor:pointer;
}
#nested_container .radial_div_item.active { 
	background-color:#511; color:white;
	padding: 10px; 
	-moz-border-radius:40px;
	z-index:100;
}

JavaScript

jQuery(document).ready(function(){
  	jQuery("#nested_container").radmenu({
		listClass: 'list', // the list class to look within for items
		itemClass: 'item', // the items 
		radius: 100, // radius in pixels
		animSpeed:400, // animation speed in millis
		centerX: 30, // the center x axis offset
		centerY: 100, // the center y axis offset
		selectEvent: "click", // the select event (click)
		onSelect: nestedSelection,
		angleOffset: 0 // in degrees
	});
});

var jlastSelected;
var build = true;

// the onSelect method for the main radmenu
function nestedSelection(jselected){
// make sure that there are elements
	if(jselected.length){
		// only do this if a parent menu item has been selected
		if(jlastSelected) {
			if(jlastSelected.is(":visible")){ // if theres an active radmenu item, i.e it's visible
				 // check to see if its the parent of the nested menu item
				if(jlastSelected.parents(".radial_div").length){
					jlastSelected.radmenu("hide"); // hide the radmenu
					build = false; // we don't want to build a new radmenu
				}
			}else { // this is a new selection
				jlastSelected = null;
				build = true; // we want to build the sublist if avail.
			}
		}
		if(build){
			// build the sublist radmenu and show it 
			jselected.radmenu(selectedRadmenuOptions).radmenu("show");
			// add some effects for the menu selections
			jselected.siblings().fadeTo("slow", 0.32);
			jselected.fadeTo("slow", 1);
			// store the last item so for nested elements
			jlastSelected = jselected;
		}else{
			// toggle : show the parent radmenu (i.e. 'reset' the main radmenu)
			jselected.parents(".radial_div").radmenu("show");
		}
	}
};

// sublist menu options
var selectedRadmenuOptions = {
	listClass: "sublist",
	itemClass: "subitem",
	select: "click",
	rotate:true,
	onSelect: function(jselected){
		//update the box in the top right corner with the selected item's HTML
		jQuery("#nested_selection").html(jselected.html());
		jselected.siblings().fadeTo("slow", 0.32);
		jselected.fadeTo("slow", 1);
	},
	radius: 50,
	centerX: -10,
	centerY: -40,
	angleOffset: 0
};

Some examples of radmenu's implementation in the wild


YouTube QuickPlay - By Nirvana Tikku
TubeLoop - By Nirvana Tikku
193King - By Derek McKee
Quality Schools International - By Josh Olson

File details / download

v1.0.0

Production - 4.9kB ( Download )
Minified with Google Compiler

Development - 17kB ( Download )
Heavily commented

GitHub - http://github.com/nirvanatikku/jQuery-Radmenu-Plugin

Changelog

v1.0.0 - May 14, 2011

Add CSS3 rotation support for menu items (rotate option, default false)
Add "opts" method to get radmenu's options
Add "getRotation" method as part of options, to control angle offset for rotation
All angle inputs are now degrees (from radians)
Enhance onNext and onPrev to discontinue actions (simply return false)
Support wagon-wheel style interface
» Rotation Browser Support: Safari, Chrome, FF 3.5+, IE 9+, and Opera 11+

v0.9.8 - Sept 11, 2010

Bug fixes for FF onScale event

v0.9.7 - Sept 9, 2010

Allow extensibility of onScale event
New default attribute: scaleAnimSpeed
New default attribute: scaleAnimOpts - options to merge with repositioning CSS attributes

v0.9.6 - Sept 5, 2010

Add scaling of radmenu
Provide hook onScaleItem

v0.9.5 - July 28, 2010

Updates for IE

v0.9.4 - July 27, 2010

Added 'onShow' and 'onHide' methods (as per request from Sergio Lopez and Matias Fuster)
Radial div container and items can be specified by developer
Show method can be passed function if desired other than preset 'onShow'
Shuffling random offset can now be specified by developer
New event 'items' event will return radmenu items

v0.9.3 - July 15, 2010

Addition of a 'destroy' event
Update afterAnimation event to actually fire after all animations are complete

v0.9.2 - June 29, 2010

Update event binding for nested radial menus (currently supports max depth 1)

v0.9.1 - June 26, 2010

Update event namespaces to avoid collisions (i.e. 'radmenu.next' instead of 'next')
Shuffling enhancement

v0.9 - June 20, 2010

Create a radial menu with any markup
Next/Previous Buttons
Show/Hide a radial menu
Control animation speed
Define offset center point for radial container
Browser support verified: Firefox 3.5+, Chrome 5, Opera 10, Safari 5, IE8

Frequently Asked Questions

What version of jQuery is Radmenu dependent on?

jQuery 1.4.2+

Can I contribute / connect through GitHub?

Yes, please! Check out the project @
http://github.com/nirvanatikku/jQuery-Radmenu-Plugin

Fork me on GitHub

Nirvana Tikku, Tikku.com © 2010-2013