Dynamic context menu is a new Javascript feature that will automatically create a ‘ul’ menu made of ‘li’ items where the click happens.

That menu will be automatically displayed where the mouse was when clicking, then deleted when leaving it, or when a ‘li’ item would have been clicked. The default class used for ‘ul’ is ClassContextMenu, but you can specify another one in options.

The amazing stuff here is that menu will be always displayed to be seen completely. That means if there is place enough to display it where the click happens, the top left menu corner will be set at the mouse current position, minus the default margin – which can also be set in options – . But if there is not place enough below the click, the bottom left corner will be set at the mouse current position. Or if there is not place enough on right direction, then the top or bottom right corner will be set atv the mouse currentv position, depending here again if there is place enough below. A bit difficult to write but really easy when you’ll see the result. In fact, you have nothing to do, that’s the thing 😉

And only one such menu can be displayed at a time ; opening another one will delete the previous.

$("#an_id").on("click", function ()
{
    CYContextMenu([
    {
        id: "IDThumbnailView",
        icon: "download",
        label: "DOWNLOAD"
    },
    {
        id: "IDThumbnailRename",
        icon: "pencil",
        label: "RENAME"
    },
    {
        id: "IDThumbnailDelete",
        icon: "remove",
        label: "DELETE"
    }]);
    $("#IDThumbnailView").on("click", function ()
    {
        .. click on first context menu line ..
    });
    $("#IDThumbnailRename").on("click", function ()
    {
        .. click on second context menu line ..
    });
    $("#IDThumbnailDelete").on("click", function ()
    {
        .. click on third context menu line ..
    });
}

When clicking on #an_id, a contextual menu will be displayed with 3 choices.

Adapt to your needs … 😉