How to create a Right Click customized menu on li item in HTML

Question

My requirement is that i want to open a right click customized menu on particular li item. I got a js file from

http://lablogic.net/index.php#scripts/contextmenu/right-click-menu.php

URL but in this js file right click works on whole page but i want it to work only some li or a tags. When users right click on particular li or a tag at that time this right click menu opens and if user clicks anywhere else then it hides and open normal right click menu.

Please help me out .....

For reference.. Like http://www.dropbox.com or http://skydrive.live.com etc....

Have you seen [this question](http://stackoverflow.com/q/4909167/1612146)? — George, Oct 07 '13 at 11:03
@anOG : yes i saw that, but in this question right click works on whole html page and i want to work only any particular item now on whole html page.... — Gaurav Agrawal, Oct 07 '13 at 11:30

Kelu Thatsall · Accepted Answer · 2013-10-07T11:54:35.220

For starters, I don't exactly know which effect you would like to achieve, but I'll asume it's a menu like in skydrive when you click on files and directories.

There is probably a lot of solutions to this, but I can stick with yours found code. First things first - we need to decode it. You can use some online beutyfiers like this one: http://jsbeautifier.org/

I've copied the code of the file contextmenu_o.js and got this code:

var mouse_x = 0;
var mouse_y = 0;
var mouse_left = false;
var mouse_right = false;
if (document.addEventListener != undefined) document.addEventListener('mousemove', mouseMove, true);
else if (document.layers) document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP);
document.onmousemove = mouseMove;
document.oncontextmenu = RightMouseDown;
document.onmousedown = mouseDown;
document.onmouseup = mouseUp;

function mouseMove(a) {
    mouse_x = document.all ? event.clientX + document.body.scrollLeft : document.layers ? a.x + window.pageXOffset : a.clientX + window.pageXOffset;
    mouse_y = document.all ? event.clientY + document.body.scrollTop : document.layers ? a.y + window.pageYOffset : a.clientY + window.pageYOffset
}

function RightMouseDown() {
    mouse_right = true;
    return false
}

function init(a, w) {
    var b = document.createElement("DIV");
    b.id = "contextmenu";
    if (!w) var w = 120;
    b.style.width = w + "px";
    var c = '<div style="position:relative;left:10px;top:-4px;">';
    c += a;
    c += ' <a href="http://lablogic.net/scripts/contextmenu/right-click-menu.php" target="_top" title="javascript contextmenu" alt="Free javascript menu"><font color="#565656" size="-2">Get it...</font></a>';
    c += '</div>';
    b.innerHTML = c;
    b.style.position = "absolute";
    b.style.left = "0px";
    b.style.top = "0px";
    b.style.visibility = "hidden";
    b.style.overflow = "hidden";
    b.style.padding = "4px";
    b.style.backgroundColor = "#ffffff";
    b.style.border = "1px solid #6a6868";
    document.body.appendChild(b);
    delete b
}

function mouseUp(e) {
    if (e.which == 1) document.getElementById("contextmenu").style.visibility = "hidden";
    else if (e.which == 3) mouse_right = false
}

function mouseDown(e) {
    if (e.which == 3) {
        mouse_right = true;
        document.getElementById("contextmenu").style.left = mouse_x + "px";
        document.getElementById("contextmenu").style.top = mouse_y + "px";
        document.getElementById("contextmenu").style.visibility = "visible"
    }
}

This isn't the most universal code out there and we need some changes. I'm making my changes visible here, on jsfiddle, but mainly I just overwrite document with my div of choice which I'm giving event listeners.

score 0 · Answer 2 · answered Oct 07 '13 at 11:59

Button with drop down menu based on li list.

jsfiddle.net

Open on lbutton click.

var $menuButton = $("#menuButton");
var $menuElement = $("#menuElement");

$menuButton.button({
    icons: {
        secondary: "ui-icon-triangle-1-s"
    }
})
    .click(function (event) {
    $(document).one("click", function () {
        $menuElement.css("visibility", "hidden");
    });

    $menuElement.css("visibility", "visible");
    event.stopPropagation();
});

$menuElement
    .menu({
    select: function (event, ui) {
        $menuElement.css("visibility", "hidden");
    }
})
    .css("visibility", "hidden")
    .position({
    my: "left top",
    at: "left bottom",
    of: $buttonElement
});

How to create a Right Click customized menu on li item in HTML

2 Answers2