jQuery Pretty Pie Click Hover Menu

Sam Deering
Share

jquery-piehover-menu

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;
    }); 
});

Demo
Download Page