Hello, glad you are here. I am kunaal and today we will see how to make our own custom right click options. You can see demo below.

Demo

Video Tutorial -

If you find this article hard or for better explanation. You can watch video tutorial.

If you like the video tutorial. Please consider subscribing my youtube channel.

Let's code

Inside HTML file under <body> tag write

h1 class="text">right click</h1>

<div class="options">
    <h1 class="title">pages</h1>
    <hr>
    <ul class="link-container">
        <li class="link-item">
            <a href="#" class="link">home</a>
        </li>
        <li class="link-item">
            <a href="#" class="link">projects</a>
        </li>
        <li class="link-item">
            <a href="#" class="link">about us</a>
        </li>
        <li class="link-item">
            <a href="#" class="link">contact us</a>
        </li>
    </ul>
</div>

CSS

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    width: 100%;
    min-height: 100vh;
    background: #ffa462;
    font-family: roboto, sans-serif;
    display: flex;
    place-items: center;
}

.text{
    text-transform: uppercase;
    font-size: 250px;
    text-align: center;
    color: #000;
    opacity: .25;
    user-select: none;
    word-wrap: break-word;
}

.options{
    width: 200px;
    height: 250px;
    background: #ebebeb;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 10px;
    padding: 20px 0;
    border: 2px solid #f0efef;
    box-shadow: 0 20px 20px rgba(0, 0, 0, 0.3);
    user-select: none;
    display: none;
}

.title{
    padding: 0 20px;
    font-weight: 400;
    text-transform: capitalize;
    color: #565656;
    font-size: 25px;
    opacity: .7;
}

.options hr{
    padding: 0 20px;
    opacity: .1;
    border: .5px solid #000;
    border-radius: 10px;
    margin: 10px;
}

.link-item{
    list-style: none;
    width: 100%;
    height: 30px;
    margin: 2px 0;
    line-height: 30px;
    display: flex;
}

.link{
    color: #969696;
    font-weight: 300;
    text-transform: capitalize;
    text-decoration: none;
    width: 100%;
    padding: 0 20px;
}

.link:hover{
    background-color: #fff;
}

And last little bit of JS.

const options = document.querySelector('.options');

window.oncontextmenu = (e) => {
    e.preventDefault();

    if(e.y + 250 <= window.innerHeight){
        options.style.top = `${e.y}px`;
    } else{
        options.style.top = `${e.y - 250}px`;
    }

    if(e.x + 200 <= window.innerWidth){
        options.style.left = `${e.x}px`;
    } else{
        options.style.left = `${e.x - 200}px`;
    }
    options.style.display = 'block';
}

window.onclick = () => {
    if(options.style.display === 'block'){
        options.style.display = null;
    }
}

I hope you understood everything. If you have any doubt or you find any mistake that I made or you have any suggestion feel free to ask me in comment.

If you are interested in programming and want to know how I a 15yr old teen do coding make these design. You can follow me on my Instagram. I am also planning to post my game development stuff on Instagram.

Source Code My youtube Channel, Instagram

Blog

Awesome custom right click options. Pure CSS and JS

Modern Web

Demo

Video Tutorial -

Let's code

Join Our Newsletter. No Spam, Only the good stuff.

Related