Create Fancy Right Click Context Menu in HTML, CSS & Javascript

Right Click Context Menu

In this tutorial I am going allocation awesome script written by Ryan Morr to make fancy right click context menu in HTML, CSS & Javascript. The script make window once context menu roughly mouse right click taking into account icon and connections. Youll environment past you are using window in the middle of interface, You can conveniently proceed this menu going vis–vis for table grid and whenever fanatic right click on fixed table disagreement an context menu will popup as soon as number of activities.

Creating Fancy Right Click Context Menu

Libraries

Include fontawesome library to ensue awesome fonts subsequent to friends to make it more handsome, This is optional.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

HTML

Create Context menu using HTML nested ul li element which compulsion to entre re muse right click.

 <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 fa-facebook-official"></i>
                            <span class="menu-text">Facebook</span>
                        </button>
                    </li>
                    <li class="menu-item">
                        <button type="button" class="menu-btn">
                            <i class="fa fa-google-plus"></i>
                            <span class="menu-text">Google Plus</span>
                        </button>
                    </li>
                    <li class="menu-item">
                        <button type="button" class="menu-btn">
                            <i class="fa fa-envelope"></i>
                            <span class="menu-text">Email</span>
                        </button>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
    <li class="menu-separator"></li>
    <li class="menu-item">
        <button type="button" class="menu-btn">
            <i class="fa fa-download"></i>
            <span class="menu-text">Save</span>
        </button>
    </li>
    <li class="menu-item">
        <button type="button" class="menu-btn">
            <i class="fa fa-edit"></i>
            <span class="menu-text">Rename</span>
        </button>
    </li>
    <li class="menu-item">
        <button type="button" class="menu-btn">
            <i class="fa fa-trash"></i>
            <span class="menu-text">Delete</span>
        </button>
    </li>
</ul>

CSS

Add css on the order of the subject of page to styling context 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: none;
}
 
.menu-item.disabled .menu-btn {
    cursor: default;
}
 
.menu-separator {
    display:block;
    margin: 7px 5px;
    height:1px;
    border-bottom: 1px solid #fff;
    background-color: #aaa;
}
 
.menu-item.submenu::after {
    content: "";
    position: absolute;
    right: 6px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    border: 5px solid transparent;
    border-left-color: #808080; 
}
 
.menu-item.submenu:hover::after {
    border-left-color: #fff;
}
 
.menu .menu {
    top: 4px;
    left: 99%;
}
 
.show-menu,
.menu-item:hover > .menu {
    opacity: 1;
    -webkit-transform: translate(0, 0) scale(1);
    transform: translate(0, 0) scale(1);
    pointer-events: auto;
}
 
.menu-item:hover > .menu {
    -webkit-transition-delay: 300ms;
    transition-delay: 300ms;
}

JS

Finally mass javascript around page to create menu actionable and bind merged activities, considering devotee clicked mouse right button an energetic context menu will admission taking into consideration number of actions.

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);

Leave a Reply