rename contextmenu

by Ea Bangalore

HTML

<div class="cont">

</div>



<ul class="menu">
    <li class="menu-item">
        <a href="#" class="menu-btn">
            <i class="fa fa-folder-open"></i>
            <span class="menu-text">Open</span>
        </a>
    </li>
    <li class="menu-item disabled">
        <button type="button" class="menu-btn">
            <span class="menu-text">Open in New Window</span>
        </button>
    </li>
    <li class="menu-separator"></li>
    <li class="menu-item">
        <button type="button" class="menu-btn">
            <i class="fa fa-reply"></i>
            <span class="menu-text">Reply</span>
        </button>
    </li>
    <li class="menu-item">
        <button type="button" class="menu-btn">
            <i class="fa fa-star"></i>
            <span class="menu-text">Favorite</span>
        </button>
    </li>
    <li class="menu-item submenu">
        <button type="button" class="menu-btn">
            <i class="fa fa-users"></i>
            <span class="menu-text">Social</span>
        </button>
        <ul class="menu">
            <li class="menu-item">
                <button type="button" class="menu-btn">
                    <i class="fa fa-comment"></i>
                    <span class="menu-text">Comment</span>
                </button>
            </li>
            <li class="menu-item submenu">
                <button type="button" class="menu-btn">
                    <i class="fa fa-share"></i>
                    <span class="menu-text">Share</span>
                </button>
                <ul class="menu">
                    <li class="menu-item">
                        <button type="button" class="menu-btn">
                            <i class="fa fa-twitter"></i>
                            <span class="menu-text">Twitter</span>
                        </button>
                    </li>
                    <li class="menu-item">
                        <button type="button" class="menu-btn">
                            <i class="fa...

CSS

/* Page */

html {
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, #fff 0%, #a6b9c1 100%) no-repeat;
}


h1,
h2 {
    color: #555;
}

.cont{
  width:200px;
  height:200px;
  background-color:red;
  
}


/* Menu */

.menu {
    position: absolute;
    width: 200px;
    padding: 2px;
    margin: 0;
    border: 1px solid #bbb;
    background: #eee;
    background: -webkit-linear-gradient(to bottom, #fff 0%, #e5e5e5 100px, #e5e5e5 100%);
    background: linear-gradient(to bottom, #fff 0%, #e5e5e5 100px, #e5e5e5 100%);
    z-index: 100;
    border-radius: 3px;
    box-shadow: 1px 1px 4px rgba(0,0,0,.2);
    opacity: 0;
    -webkit-transform: translate(0, 15px) scale(.95);
    transform: translate(0, 15px) scale(.95);
    transition: transform 0.1s ease-out, opacity 0.1s ease-out;
    pointer-events: none;
}

.menu-item {
    display: block;
    position: relative;
    margin: 0;
    padding: 0;
    white-space: nowrap;
}

.menu-btn { 
    display: block;
    color: #444;
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    cursor: pointer;
    border: 1px solid transparent;
    white-space: nowrap;
    padding: 6px 8px;
    border-radius: 3px;
}

button.menu-btn {
    background: none;
    line-height: normal;
    overflow: visible;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    width: 100%;
    text-align: left;
}

a.menu-btn {
    outline: 0 none;
    text-decoration: none;
}

.menu-text {
    margin-left: 25px;
}

.menu-btn .fa {
    position: absolute;
    left: 8px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.menu-item:hover > .menu-btn { 
    color: #fff; 
    outline: none; 
    background-color: #2E3940;
    background: -webkit-linear-gradient(to bottom, #5D6D79, #2E3940);
    background: linear-gradient(to bottom, #5D6D79, #2E3940);
    border: 1px solid #2E3940;
}

.menu-item.disabled {
    opacity: .5;
    pointer-events:...

JavaScript

/*var menu = document.querySelector('.menu');

function showMenu(x, y){
    menu.style.left = x + 'px';
    menu.style.top = y + 'px';
    menu.classList.add('show-menu');
}

function hideMenu(){
    menu.classList.remove('show-menu');
}

function onContextMenu(e){
    e.preventDefault();
    showMenu(e.pageX, e.pageY);
    document.addEventListener('mousedown', onMouseDown, false);
}

function onMouseDown(e){
    hideMenu();
    document.removeEventListener('mousedown', onMouseDown);
}

document.addEventListener('contextmenu', onContextMenu, false); */


$(function() {

    var $contextMenu = $(".menu");

    $(document).on("contextmenu", '.cont', function(e) {
         $contextMenu.css({
              display: "block",
              opacity: 1,
              left: e.pageX,
              top: e.pageY
         });
         
        // $('.menu').addClass('menu-item');
         
         return false;
    });

    $('html').click(function() {
         $contextMenu.hide();
    });

});