Context menu in list HTML / CSS / JavaScript / jQuery

Question

What is the best way to implement a menu for web in a list mode?

What I have:

• a list view of some items on a client website that looks exactly like a finder (mac) window in list view.

What I need:

• a way to implement a menu like the menu that appears when you right-click an item in finder or windows explorer (the menu with "open | open with | rename | delete" etc)

image for reference:

requirements:

1. the menu must work in a list view mode. I tried some implementation with popovers that didn't allow to select one of the menu items because when the mouse went down on the screen it activated another popover;

2. the menu must allow for buttons inside as well as input text areas.

3. the menu must be positioned in the right side of the screen or wherever the person right-clicks with a mouse. This is important because clicking the list has a specific function (other then displaying the menu). So, I have to allow the action to be performed or the menu to be displayed. My idea was left-click / right-click or left side of the item minus 20 pixels and 20 pixels in the right.

ideally, it would also be:

1. accessed on hovering the right end of the item, and allowing the user to move the mouse down and access each menu until he finds the correct. Something like when there is a sidemenu with submenus in (just the same feel, as it is not the same context applied);

2. not having the tooltip / arrow of a popover would be better. If impossible, it could at least be arranged correctly in direction with the object to hover. I learned that in object too much to the right or left the tooltip / arrow doesn't adjust itself, but remains centered to the menu width.

3. better if less dependencies. I prefer just HTML, just HTML or CSS, just HTML, CSS and Javascript or, if impossible, just HTML, CSS, Javascript, jQuery and jQuery plugins. But, as usual, the simpler the better.

My list is based a lot of divs (for each item) inside another div (for the right side of the window). There is also, like a finder window, a left side menu based on a div with float left. (just saying that because better more info than less).

I do not have a working code yet for the menu. Actually, I'm not sure how to start. I tried some stackoverflow answers but none seems to fit my purpose. I'm unsure if I should dive in bootstrap, x-editable or anything else.

Answer 1

I've made a Mac OS X like content menu here:

Fiddle

You can't really make a context menu without JavaScript. There is an object called funcs if you scroll down in the JavaScript. Each item is HTML like:

<item action="">HTML Code for Menu Item</item>

There is also a state tag you can apply to gray something out:

<item state="gray">Grayed out item</item>

The attribute action will let the item run JavaScript when you click it:

<item action="run">Run Code!</item>

then you make a function run in funcs :

var funcs = {
    "run": function () {
        alert('Code!');
    }
};

Now when you click that item. It will alert Code! . In each item, you can put whatever HTML, and you can run whatever code.

---

This will allow you to right click anywhere to get the context menu. It will allow you to put whatever code you want, uses jQuery only without plugins, and is generally pretty simple. I modeled this after OS X Yosemite's popover, I even sampled colors directly.

---

JavaScript port with Element Detection support

---

With special noclick option and input

This version you can add exit='noclick' and that specific item won't make the thing disappear.