This is a JavaScript tutorial where I showed you how to create Custom Right Click. If you know basic JavaScript you can create this Custom Right Click Context Menu.
We use more left click of the mouse. However, from the use of right click in most large websites or applications. This type of Custom Right Click Menu is used even in Windows and all other operating systems. Watch its live demo to learn how it works.
Here I will create a simple JavaScript Right Click Context Menu. And I will share complete information on how I made it.
JavaScript Custom Right Click Menu
This type of Custom Context Menu appears when you right-click anywhere on the webpage. Left click again to hide the Custom Menu bar.
As you can see, with the right click of the mouse, a small box appears. There are some menu items in that box. Although you can use something else instead of this menu.
Below I have given all the code and how it was created.
HTML Code
First I have added the menu items using a few lines of simple html. Here are 5 menu items used. You can increase the amount of this menu.
<div id="context-menu">
<div class="item">View</div>
<div class="item">Refresh</div>
<div class="item">Copy</div>
<div class="item">Customize</div>
<div class="item">Save As</div>
</div>
CSS Code
Now I have designed the menu item and Right Click Context Menu by css.
- First I designed the webpage using some code.
- Then the basic design of context-menu has been done.
- Here the menu bar's
'visibility: hidden'
has been done. This means that the menu bar cannot be seen under normal conditions. - At the end I have designed the menu item and added the
hover effect
.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
background-color: #dfe8f1;
}
#context-menu {
background-color: #ffffff;
box-shadow: 0 0 20px rgba(37, 40, 42, 0.22);
color: #1f194c;
width: 10em;
padding: 0.8em 0.6em;
font-size: 1.3rem;
position: fixed;
visibility: hidden;
}
.item {
padding: 0.3em 1.2em;
}
.item:hover {
background-color: rgba(44, 141, 247, 0.2);
cursor: pointer;
}
JavaScript
Now it's time to activate the Right Click Context Menu using JavaScript. In this case, every line of JavaScript has the necessary explanation.
Even if you are a beginner, you will not have any difficulty in understanding.
//Events for desktop and touch
let events = ["contextmenu", "touchstart"];
//initial declaration
var timeout;
//for double tap
var lastTap = 0;
//refer menu div
let contextMenu = document.getElementById("context-menu");
//same function for both events
//event type is a data structure that defines the data contained in an event
events.forEach((eventType) => {
document.addEventListener(
eventType,
(e) => {
//preventDefault() method stops the default action of a selected element from happening by a user
e.preventDefault();
//x and y position of mouse or touch
//mouseX represents the x-coordinate of the mouse
let mouseX = e.clientX || e.touches[0].clientX;
//mouseY represents the y-coordinate of the mouse.
let mouseY = e.clientY || e.touches[0].clientY;
//height and width of menu
//getBoundingClientRect() method returns the size of an element and its position relative to the viewport
let menuHeight = contextMenu.getBoundingClientRect().height;
let menuWidth = contextMenu.getBoundingClientRect().width;
//width and height of screen
//innerWidth returns the interior width of the window in pixels
let width = window.innerWidth;
let height = window.innerHeight;
//If user clicks/touches near right corner
if (width - mouseX <= 200) {
contextMenu.style.borderRadius = "5px 0 5px 5px";
contextMenu.style.left = width - menuWidth + "px";
contextMenu.style.top = mouseY + "px";
//right bottom
if (height - mouseY <= 200) {
contextMenu.style.top = mouseY - menuHeight + "px";
contextMenu.style.borderRadius = "5px 5px 0 5px";
}
}
//left
else {
contextMenu.style.borderRadius = "0 5px 5px 5px";
contextMenu.style.left = mouseX + "px";
contextMenu.style.top = mouseY + "px";
//left bottom
if (height - mouseY <= 200) {
contextMenu.style.top = mouseY - menuHeight + "px";
contextMenu.style.borderRadius = "5px 5px 5px 0";
}
}
//display the menu
contextMenu.style.visibility = "visible";
},
{ passive: false }
);
});
//for double tap(works on touch devices)
document.addEventListener("touchend", function (e) {
//current time
var currentTime = new Date().getTime();
//gap between two gaps
var tapLength = currentTime - lastTap;
//clear previous timeouts(if any)
//The clearTimeout() method clears a timer set with the setTimeout() method.
clearTimeout(timeout);
//if user taps twice in 500ms
if (tapLength < 500 && tapLength > 0) {
//hide menu
contextMenu.style.visibility = "hidden";
e.preventDefault();
} else {
//timeout if user doesn't tap after 500ms
timeout = setTimeout(function () {
clearTimeout(timeout);
}, 500);
}
//lastTap set to current time
lastTap = currentTime;
});
//click outside the menu to close it (for click devices)
document.addEventListener("click", function (e) {
if (!contextMenu.contains(e.target)) {
contextMenu.style.visibility = "hidden";
}
});
If you want you can watch the video above to know better how this Custom Right Click (Context Menu) works.
Here I have tried to explain as much as possible. Even then, if you have any problem, you can let us know by commenting.
If you like this JavaScript Custom Right Click Context Menu, please comment.
Top comments (5)
I'd try to discourage people from doing this, because you're changing the way people expect the browser to work, and annoying those who want to do things like save an image, or activate an accessibility feature from their regular context menu. It becomes even more tricky when you try to replicate the same thing on a touch device, where context menus like this will (if they even work) cover most of the user's viewport. It's not a good fit for small screens.
You are right. This can cause many problems for the user. I created this article to inform beginners.
If someone needs a right click element in a project, they can create it this way.
There's no bad solutions, only bad usages and bad implementations.
This will definitely help
If you hold shift while right clicking, it will bring up the default menu
@jamix-vcz that's only true in some browsers, in some contexts, and it's not something you can expect users to know.