<!doctype html>

	<head>
		<title>Radial Menu Demo</title>
		<link rel = "stylesheet" type="text/css" href = "css/style.css" >
		<script src="javascript/jquery.path.js"></script>
		<script src="javascript/jquery.radMenu.js"></script>
	</head>

	<body> 
    <div id='container'>
		<ul class="radialMenu">
			<li><a href="#">Click here</a></li>
			<li><a href='#'>Item 1</a></li>
			<li><a href='#'>Item 2</a></li>
			<li><a href='#'>Item 3</a></li>
			<li><a href='#'>Item 4</a></li>
			<li><a href='#'>Item 5</a></li>
			<li><a href='#'>Item 6</a></li>
		</ul>
    </div>
	</body>

</html>
.radialMenu{
	width: 500px; 
	top: 500px; 
	left: 500px;
}

.menuItem{
	background-color: red;
	border: 2px solid black; 
}
.menuItem a{
	font-size: 10px; 
  color: white; 
}

.headItem{
	background-color: blue; 
}

#container{
  position:absolute; 
  left: 300px; 
  top: -350px; 
}
/*
 * jQuery radial menu -- Lucas Flatter, using Jonah Fox's path animation code
 * version 0.0.1
 */
/*
	$('.radialMenu').makeRadial(50,150); 
*/

(function( $ ){

$.fn.makeRadial = function(itemSize, radius) {

	var $menuItem = this.find('li'); 

	var size = itemSize; 
	var BorderRadius = size/2; 

	this.css('position','relative'); 
	$($menuItem).css('list-style-type', 'none')
				.css('display', 'block')
				  .css('width', ""+size)
				  .css('height', ""+size)
				  .css('border-radius',""+BorderRadius+"px")
				  .css('position','absolute')
				  .css('left','0px')
				  .css('top','0px'); 

	var i = 0; 
	$.each($($menuItem), function() {

		$(this).addClass('menuItem'); 

		if(i > 0)
		{
			$(this).css('top' ,'0px');
		}
		else
		{
			$(this).css('z-index','200')
				   .addClass('headItem');

		}
		i++; 
	}); 

	$.each($('.menuItem a'), function() {
		$(this).css('position','absolute'); 
		$(this).css('top',''+ BorderRadius -$(this).height()/2 + 'px'); 
		$(this).css('left',''+ BorderRadius - $(this).width()/2 + 'px');  
	}); 


	var angle = (360/ (i-1)); 
	i = 0; 
	var clicked = false; 
	$('.headItem a').click(function(event){

		event.preventDefault(); 
		$.each($('.menuItem'), function(event) {
			if(!$(this).hasClass('headItem') && !clicked)
				{
				var bezier_params = {
					start: { 
					  x: 0, 
					  y: 0, 
					  angle: 300
					},  
					end: { 
					  x: radius * Math.cos(i *angle*(Math.PI /180)),
					  y: radius * Math.sin(i*angle*(Math.PI /180)), 
					  angle: -550, 
					  length: 0.55
					}
				 }

				$(this).animate({path : new $.path.bezier(bezier_params)},500);
				i++; 
			}

			else if(!$(this).hasClass('headItem') && clicked)
			{
				var bezier_params = {
					start: { 
					  x: radius * Math.cos(i *angle*(Math.PI /180)),
					  y: radius * Math.sin(i*angle*(Math.PI /180)), 
					  angle: 800
					},  
					end: { 
					  x: 0,
					  y: 0, 
					  angle: -550, 
					  length: 0.55
					}
				 }

				$(this).animate({path : new $.path.bezier(bezier_params)},500);
				i++; 
			}

		});

		if(clicked){clicked = false; }
		else clicked = true; 
	}); 
	i= 0; 

	};
})(jQuery); 

	$(document).ready(function(){
				$('.radialMenu').makeRadial(50,150); 
			}); 

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. http://lucasflatter.com/practice/radMenu/javascript/jquery.path.js