JSFiddle - React, Tailwind, and code Playground

by ErikaDH

HTML

<script src="https://swisnl.github.io/jQuery-contextMenu/raw/2.0.0/dist/jquery.contextMenu.min.js"></script>
<link rel="stylesheet" href="https://swisnl.github.io/jQuery-contextMenu/raw/2.0.0/dist/jquery.contextMenu.min.css">
    <div class="CuadroFondo">
        <div class="SingleItem">ITEM 1</div> 
        <div class="SingleItem">ITEM 2</div> 
        <div class="SingleItem">ITEM 3</div> 
        </div>

CSS

/*!
 * jQuery contextMenu - Plugin for simple contextMenu handling
 *
 * Version: 1.6.5
 *
 * Authors: Rodney Rehm, Addy Osmani (patches for FF)
 * Web: http://medialize.github.com/jQuery-contextMenu/
 *
 * Licensed under
 *   MIT License http://www.opensource.org/licenses/mit-license
 *   GPL v3 http://opensource.org/licenses/GPL-3.0
 *
 */

.context-menu-list {
    margin:0; 
    padding:0;
    
    min-width: 120px;
    max-width: 250px;
    display: inline-block;
    position: absolute;
    list-style-type: none;
    
    border: 1px solid #DDD;
    background: #EEE;
    
    -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
       -moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
        -ms-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
         -o-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
    
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
}

.context-menu-item {
    padding: 2px 2px 2px 24px;
    background-color: #EEE;
    position: relative;
    -webkit-user-select: none;
       -moz-user-select: -moz-none;
        -ms-user-select: none;
            user-select: none;
}

.context-menu-separator {
    padding-bottom:0;
    border-bottom: 1px solid #DDD;
}

.context-menu-item > label > input,
.context-menu-item > label > textarea {
    -webkit-user-select: text;
       -moz-user-select: text;
        -ms-user-select: text;
            user-select: text;
}

.context-menu-item.hover {
    cursor: pointer;
    background-color: #39F;
}

.context-menu-item.disabled {
    color: #666;
}

.context-menu-input.hover,
.context-menu-item.disabled.hover {
    cursor: default;
    background-color: #EEE;
}

.context-menu-submenu:after {
    content: ">";
    color: #666;
    position: absolute;
    top: 0;
    right: 3px;
    z-index: 1;
}

/* icons
    #protip:
    In case you want to use sprites for icons (which I would suggest you do) have a look at
   ...

JavaScript

//Centralizacion del dialog modal en la pantalla
    $(document).ready(function () {

        $.contextMenu({
            reposition:false,
            selector: '.CuadroFondo',
            events: {
                //Funcion para cambiarle el titulo a la opcion Seguridad en el menu flotante
                show: function () {
                    var id = $(this).attr('id');
                    
                },
            },
            callback: function (key, options) {


                if (key == "expand") {
                    alert("expand");
                }

                //se borra un desarrollador
                if (key == "creargrupo") {
                    alert("creargrupo");
                }

                //Se edita la Seguridad del globo
                if (key == "seguridadgrupo") {
                    alert("jejeje")
                }

            },
            items: {
                "expand": { name: "Irak", icon: "add-expand" },
                "sep1": "--MAIN MENU--",
                "creargrupo": { name: "Afganistan", icon: "crearnuevo" },


            }
        });


        $.contextMenu({
            reposition:false,
            selector: '.SingleItem',
            events: {
                //Funcion para cambiarle el titulo a la opcion Seguridad en el menu flotante
                show: function () {
                    var id = $(this).attr('id');

                },
            },
            callback: function (key, options) {


                if (key == "expand") {
                    alert("expand");
                }

                //se borra un desarrollador
                if (key == "creargrupo") {
                    alert("creargrupo");
                }

                //Se edita la Seguridad del globo
                if (key == "seguridadgrupo") {
                    alert("jejeje")
                }

            },
            items: {
                "expand": { name: "Miami", icon: "add-expand" },
    ...