zikes-circlemenu
Version:
A circular menu (often called a radial or pie menu) jQuery plugin.
264 lines (262 loc) • 15.1 kB
HTML
<html>
<head>
<meta charset="utf-8" />
<title>Circle Menu</title>
<link rel="stylesheet" type="text/css" href="css/circle-menu.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="../jQuery.circleMenu.js"></script>
<script>
$(function(){
$('#menu').circleMenu({direction:'bottom-right',
open: function(){console.log('menu opened');},
close: function(){console.log('menu closed');},
init: function(){console.log('menu initialized');}});
$('#menu2').circleMenu({
direction:'full',
trigger:'click',
open: function(){console.log('menu opened');},
close: function(){console.log('menu closed');},
init: function(){console.log('menu initialized');},
select: function(evt,index){console.log(evt,index)}
}).on('circleMenu-open',function(){
console.log('menu opened 2');
});
$('#menu3').circleMenu({direction:'top-left'});
$('#menu4').circleMenu({direction:'bottom-left'});
$('#menu5').circleMenu({direction:'top-right'});
$('#menu6').circleMenu({direction:'bottom'});
$('#menu7').circleMenu({direction:'right'});
$('#menu8').circleMenu({direction:'top'});
$('#menu9').circleMenu({direction:'left'});
$('#menu10').circleMenu({direction:'bottom-half'});
$('#menu11').circleMenu({direction:'right-half'});
$('#menu12').circleMenu({direction:'top-half'});
$('#menu13').circleMenu({direction:'left-half'});
$('#menu14').circleMenu({direction:'full', trigger:'click', step_in: 300, step_out: 300});
$('#menu15').circleMenu({direction:'full', trigger:'click', step_in: -300, step_out: -300});
$('#menu16').circleMenu({
direction:'full',
step_in:0,
step_out:0
});
$('a').on('click',function(evt){if($(this).attr('href')==='#'){evt.preventDefault();}});
$('#examples > div:first-child').css('display','block');
$('nav li:first-child a').addClass('active');
$('nav a').each(function(){
var $link = $(this);
$link.on('click', function(evt){
$('nav a').removeClass('active');
$('#examples > div').css('display','none');
$('#'+$link.attr('rel')).css('display','block');
$link.addClass('active');
});
})
});
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-27581645-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body>
<nav>
<ul>
<li><a href="#" rel="ex-corners">Corners</a></li>
<li><a href="#" rel="ex-sides">Sides</a></li>
<li><a href="#" rel="ex-sides-half">Sides, Half Circle</a></li>
<li><a href="#" rel="ex-full-clickopen">Full, Click to Open</a></li>
<li><a href="#" rel="ex-full-spinopen">Full, Spins Open</a></li>
<li><a href="#" rel="ex-timing">Timing</a></li>
<li><a href="#" rel="ex-timing-reversed">Timing, Reversed</a></li>
</ul>
</nav>
<div id="examples">
<div id="ex-corners">
<ul class="menu" id="menu">
<li><a href="#"></a></li>
<li><a href="#" alt="Item 1" title="Item 1">1</a></li>
<li><a href="#" alt="Item 2" title="Item 2">2</a></li>
<li>
<ul class="menu" id="submenu">
<li><a href="#"></a></li>
<li><a href="#" alt="Item 1" title="Item 1">1</a></li>
<li><a href="#" alt="Item 2" title="Item 2">2</a></li>
<li><a href="#" alt="Item 3" title="Item 3">3</a></li>
<li><a href="#" alt="Item 4" title="Item 4">4</a></li>
<li><a href="#" alt="Item 5" title="Item 5">5</a></li>
</ul>
</li>
<li><a href="#" alt="Item 4" title="Item 4">4</a></li>
<li><a href="#" alt="Item 5" title="Item 5">5</a></li>
</ul>
<ul class="menu" id="menu3">
<li><a href="#"></a></li>
<li><a href="#" alt="Item 1" title="Item 1">1</a></li>
<li><a href="#" alt="Item 2" title="Item 2">2</a></li>
<li><a href="#" alt="Item 3" title="Item 3">3</a></li>
<li><a href="#" alt="Item 4" title="Item 4">4</a></li>
<li><a href="#" alt="Item 5" title="Item 5">5</a></li>
</ul>
<ul class="menu" id="menu4">
<li><a href="#"></a></li>
<li><a href="#" alt="Item 1" title="Item 1">1</a></li>
<li><a href="#" alt="Item 2" title="Item 2">2</a></li>
<li><a href="#" alt="Item 3" title="Item 3">3</a></li>
<li><a href="#" alt="Item 4" title="Item 4">4</a></li>
<li><a href="#" alt="Item 5" title="Item 5">5</a></li>
</ul>
<ul class="menu" id="menu5">
<li><a href="#"></a></li>
<li><a href="#" alt="Item 1" title="Item 1">1</a></li>
<li><a href="#" alt="Item 2" title="Item 2">2</a></li>
<li><a href="#" alt="Item 3" title="Item 3">3</a></li>
<li><a href="#" alt="Item 4" title="Item 4">4</a></li>
<li><a href="#" alt="Item 5" title="Item 5">5</a></li>
</ul>
</div>
<div id="ex-sides">
<ul class="menu" id="menu6">
<li><a href="#"></a></li>
<li><a href="#" alt="Item 1" title="Item 1">1</a></li>
<li><a href="#" alt="Item 2" title="Item 2">2</a></li>
<li><a href="#" alt="Item 3" title="Item 3">3</a></li>
<li><a href="#" alt="Item 4" title="Item 4">4</a></li>
<li><a href="#" alt="Item 5" title="Item 5">5</a></li>
</ul>
<ul class="menu" id="menu7">
<li><a href="#"></a></li>
<li><a href="#" alt="Item 1" title="Item 1">1</a></li>
<li><a href="#" alt="Item 2" title="Item 2">2</a></li>
<li><a href="#" alt="Item 3" title="Item 3">3</a></li>
<li><a href="#" alt="Item 4" title="Item 4">4</a></li>
<li><a href="#" alt="Item 5" title="Item 5">5</a></li>
</ul>
<ul class="menu" id="menu8">
<li><a href="#"></a></li>
<li><a href="#" alt="Item 1" title="Item 1">1</a></li>
<li><a href="#" alt="Item 2" title="Item 2">2</a></li>
<li><a href="#" alt="Item 3" title="Item 3">3</a></li>
<li><a href="#" alt="Item 4" title="Item 4">4</a></li>
<li><a href="#" alt="Item 5" title="Item 5">5</a></li>
</ul>
<ul class="menu" id="menu9">
<li><a href="#"></a></li>
<li><a href="#" alt="Item 1" title="Item 1">1</a></li>
<li><a href="#" alt="Item 2" title="Item 2">2</a></li>
<li><a href="#" alt="Item 3" title="Item 3">3</a></li>
<li><a href="#" alt="Item 4" title="Item 4">4</a></li>
<li><a href="#" alt="Item 5" title="Item 5">5</a></li>
</ul>
</div>
<div id="ex-full-clickopen">
<ul class="menu" id="menu2">
<li><a href="#"></a></li>
<li><a href="#" alt="Item 1" title="Item 1">1</a></li>
<li><a href="#" alt="Item 2" title="Item 2">2</a></li>
<li><a href="#" alt="Item 3" title="Item 3">3</a></li>
<li><a href="#" alt="Item 4" title="Item 4">4</a></li>
<li><a href="#" alt="Item 5" title="Item 5">5</a></li>
<li><a href="#" alt="Item 6" title="Item 6">6</a></li>
<li><a href="#" alt="Item 7" title="Item 7">7</a></li>
<li><a href="#" alt="Item 8" title="Item 8">8</a></li>
<li><a href="#" alt="Item 9" title="Item 9">9</a></li>
<li><a href="#" alt="Item 10" title="Item 10">10</a></li>
</ul>
</div>
<div id="ex-full-spinopen">
<ul class="menu" id="menu16">
<li><a href="#"></a></li>
<li><a href="#" alt="Item 1" title="Item 1">1</a></li>
<li><a href="#" alt="Item 2" title="Item 2">2</a></li>
<li><a href="#" alt="Item 3" title="Item 3">3</a></li>
<li><a href="#" alt="Item 4" title="Item 4">4</a></li>
<li><a href="#" alt="Item 5" title="Item 5">5</a></li>
<li><a href="#" alt="Item 6" title="Item 6">6</a></li>
<li><a href="#" alt="Item 7" title="Item 7">7</a></li>
<li><a href="#" alt="Item 8" title="Item 8">8</a></li>
<li><a href="#" alt="Item 9" title="Item 9">9</a></li>
<li><a href="#" alt="Item 10" title="Item 10">10</a></li>
</ul>
</div>
<div id="ex-sides-half">
<ul class="menu" id="menu10">
<li><a href="#"></a></li>
<li><a href="#" alt="Item 1" title="Item 1">1</a></li>
<li><a href="#" alt="Item 2" title="Item 2">2</a></li>
<li><a href="#" alt="Item 3" title="Item 3">3</a></li>
<li><a href="#" alt="Item 4" title="Item 4">4</a></li>
<li><a href="#" alt="Item 5" title="Item 5">5</a></li>
<li><a href="#" alt="Item 6" title="Item 6">6</a></li>
<li><a href="#" alt="Item 7" title="Item 7">7</a></li>
<li><a href="#" alt="Item 8" title="Item 8">8</a></li>
</ul>
<ul class="menu" id="menu11">
<li><a href="#"></a></li>
<li><a href="#" alt="Item 1" title="Item 1">1</a></li>
<li><a href="#" alt="Item 2" title="Item 2">2</a></li>
<li><a href="#" alt="Item 3" title="Item 3">3</a></li>
<li><a href="#" alt="Item 4" title="Item 4">4</a></li>
<li><a href="#" alt="Item 5" title="Item 5">5</a></li>
<li><a href="#" alt="Item 6" title="Item 6">6</a></li>
<li><a href="#" alt="Item 7" title="Item 7">7</a></li>
<li><a href="#" alt="Item 8" title="Item 8">8</a></li>
</ul>
<ul class="menu" id="menu12">
<li><a href="#"></a></li>
<li><a href="#" alt="Item 1" title="Item 1">1</a></li>
<li><a href="#" alt="Item 2" title="Item 2">2</a></li>
<li><a href="#" alt="Item 3" title="Item 3">3</a></li>
<li><a href="#" alt="Item 4" title="Item 4">4</a></li>
<li><a href="#" alt="Item 5" title="Item 5">5</a></li>
<li><a href="#" alt="Item 6" title="Item 6">6</a></li>
<li><a href="#" alt="Item 7" title="Item 7">7</a></li>
<li><a href="#" alt="Item 8" title="Item 8">8</a></li>
</ul>
<ul class="menu" id="menu13">
<li><a href="#"></a></li>
<li><a href="#" alt="Item 1" title="Item 1">1</a></li>
<li><a href="#" alt="Item 2" title="Item 2">2</a></li>
<li><a href="#" alt="Item 3" title="Item 3">3</a></li>
<li><a href="#" alt="Item 4" title="Item 4">4</a></li>
<li><a href="#" alt="Item 5" title="Item 5">5</a></li>
<li><a href="#" alt="Item 6" title="Item 6">6</a></li>
<li><a href="#" alt="Item 7" title="Item 7">7</a></li>
<li><a href="#" alt="Item 8" title="Item 8">8</a></li>
</ul>
</div>
<div id="ex-timing">
<ul class="menu" id="menu14">
<li><a href="#"></a></li>
<li><a href="#" alt="Item 1" title="Item 1">1</a></li>
<li><a href="#" alt="Item 2" title="Item 2">2</a></li>
<li><a href="#" alt="Item 3" title="Item 3">3</a></li>
<li><a href="#" alt="Item 4" title="Item 4">4</a></li>
<li><a href="#" alt="Item 5" title="Item 5">5</a></li>
<li><a href="#" alt="Item 6" title="Item 6">6</a></li>
<li><a href="#" alt="Item 7" title="Item 7">7</a></li>
<li><a href="#" alt="Item 8" title="Item 8">8</a></li>
</ul>
</div>
<div id="ex-timing-reversed">
<ul class="menu" id="menu15">
<li><a href="#"></a></li>
<li><a href="#" alt="Item 1" title="Item 1">1</a></li>
<li><a href="#" alt="Item 2" title="Item 2">2</a></li>
<li><a href="#" alt="Item 3" title="Item 3">3</a></li>
<li><a href="#" alt="Item 4" title="Item 4">4</a></li>
<li><a href="#" alt="Item 5" title="Item 5">5</a></li>
<li><a href="#" alt="Item 6" title="Item 6">6</a></li>
<li><a href="#" alt="Item 7" title="Item 7">7</a></li>
<li><a href="#" alt="Item 8" title="Item 8">8</a></li>
</ul>
</div>
</div>
</body>
</html>