DEV Community

Cover image for Awesome custom right click options. Pure CSS and JS
Modern Web
Modern Web

Posted on

19 6

Awesome custom right click options. Pure CSS and JS

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
    }
}
Enter fullscreen mode Exit fullscreen mode

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 CodeMy youtube Channel, Instagram

Heroku

Deliver your unique apps, your own way.

Heroku tackles the toil — patching and upgrading, 24/7 ops and security, build systems, failovers, and more. Stay focused on building great data-driven applications.

Learn More

Top comments (3)

Collapse
 
jonrandy profile image
Jon Randy 🎖️

You shouldn't be replacing the normal context menu unless there is a very good reason for doing so (perhaps something like a text formatting contextual menu in Google Docs). There is an expectation from users about what a right-click (or whatever gesture they used to invoke the context menu) should do. Weird, non-standard stuff like a page navigation really should not be here - it will only serve to annoy and confuse the user.

That said, there's nothing technically wrong here - you might just want to revise your example with a better UI use case.

Collapse
 
qucchia profile image
qucchia

There's a missing < at the beginning of the HTML snippet!

Collapse
 
qucchia profile image
qucchia

Hmm, maybe it would be nice if you could explain what the JavaScript does? And maybe some of the CSS properties like user-select. Thanks for your time!

Tiugo image

Fast, Lean, and Fully Extensible

CKEditor 5 is built for developers who value flexibility and speed. Pick the features that matter, drop the ones that don’t and enjoy a high-performance WYSIWYG that fits into your workflow

Start now

👋 Kindness is contagious

Explore a trove of insights in this engaging article, celebrated within our welcoming DEV Community. Developers from every background are invited to join and enhance our shared wisdom.

A genuine "thank you" can truly uplift someone’s day. Feel free to express your gratitude in the comments below!

On DEV, our collective exchange of knowledge lightens the road ahead and strengthens our community bonds. Found something valuable here? A small thank you to the author can make a big difference.

Okay