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

by Posted on

In this tutorial I am going share awesome script written by Ryan Morr to create fancy right click context menu in HTML, CSS & Javascript. The script create window like context menu on mouse right click with icon and links. You’ll feel like you are using window like interface, You can simply add this menu on table grid and whenever user right click on selected table row an context menu will popup with number of actions.

Creating Fancy Right Click Context Menu

Libraries

Include fontawesome library to add awesome fonts with links to make it more attractive, 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 need to open on 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 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 add javascript on page to make menu actionable and bind multiple events, as soon as user clicked mouse right button an animated context menu will open with 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);

See live demos and download source code.

DEMO | DOWNLOAD

Published by admin