jQuery Pretty Pie Click Hover Menu
Share
Hi guys, I stumbled upon this pretty cool hover menu which rotates around an element and the menu item is automatically selected when you move the mouse around it. It also has a pretty cool function that allows it to appear when you right click the mouse which could be useful for some applications.
Requirements: jQueryUI, Firefox/Chrome – may be issues with IE but later versions seem to be ok.
//example pie hover menu
$(function() {
$("#area").prettypiemenu({
buttons: [
{ img: "ui-icon-minus", title: "plaah1" },
{ img: "ui-icon-plus", title: "plaah2" },
{ img: "ui-icon-close", title: "plaah3" }
],
onSelection: function(item) {
alert (item + ' was clicked!');
},
showTitles: false
});
$("#test").prettypiemenu({
buttons: [
{ img: "ui-icon-minus", title: "plaah1" },
{ img: "ui-icon-plus", title: "plaah2" },
{ img: "ui-icon-close", title: "plaah3" },
{ img: "ui-icon-check", title: "plaah4" }
],
onSelection: function(item) {
alert (item + ' was clickedoo!');
},
closeRadius: 25,
showTitles: true
});
$( "#testbtn" ).button({ icons: {primary:"ui-icon-gear"}, text: false })
.click(function(event) {
event.preventDefault();
var offset = $( "#testbtn" ).offset();
var h = $( "#testbtn" ).height();
var w = $( "#testbtn" ).width();
var btn_middle_y = offset.top + h/2;
var btn_middle_x = offset.left + w/2;
$("#test").prettypiemenu("show", {top: btn_middle_y, left: btn_middle_x});
return false;
});
});