Demo: Menu Title

• Example CSS
• Example code
• Example HTML

right click me right click me right click me

Example CSS

The title is rendered with a :before pseudo element on the menu itself, and the first menu item is given a top margin so the title has room. Keep the child combinator in > :first-child: a plain descendant selector would also match the first child inside a menu item, such as the <i> element created for a Font Awesome icon or the <label> of an input item, and push those down as well.

Example code

Example HTML

<span class="context-menu-one btn btn-neutral">right click me</span>

<span class="context-menu-two btn btn-neutral">right click me</span>

<span class="context-menu-three btn btn-neutral">right click me</span>

<table class="table" style="width:auto;">
    <tbody>
        <tr class="context-menu-four" data-username="Alice"><td>right click this row</td></tr>
        <tr class="context-menu-four" data-username="Bob"><td>right click this row</td></tr>
        <tr class="context-menu-four" data-username="Carol"><td>right click this row</td></tr>
    </tbody>
</table>

Note: the third menu above sets data-menutitle once, right after $.contextMenu() is called, so every row shows the same static title. The fourth menu (the table) sets data-menutitle from inside the show event instead, so the title is recomputed from the row that was actually right-clicked every time the menu opens.