Welcome to today’s tutorial. In today’s tutorial, we will learn how to create a custom right-click menu. To build this context menu, we need HTML, CSS and Javascript.
This context menu works for mouse devices as well as for touch screens. For devices with a mouse click, the menu opens when the user right-clicks anywhere on the screen. When the user left-clicks anywhere outside the menu, the menu closes.For touch devices, the menu opens when the user taps on the screen and closes on double-tap.
If you would like to check out some creative menu designs and effects, you can check out this collection here. This collection comprises video tutorials from my youtube channel.
Video Tutorial:
If you are interested in coding along with me, you can watch the video version of this tutorial down below. I post news and exciting tutorials on my youtube channel every alternate day. Be sure to subscribe to my channel, so you don’t miss any of these fun tutorials.
Project Folder Structure:
Before we start to code, let us first create the project folder structure. We call the project folder – Custom Context Menu. Inside this menu, we have three files – index.html, style.css and script.js. These files are the HTML document, the stylesheet and the script file, respectively. Let us begin to code.
HTML:
We start with the HTML code. Now, copy the code provided below and paste it into your HTML section.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Custom Context Menu</title>
<!-- Google Font -->
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap"
rel="stylesheet"
/>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="context-menu">
<div class="item">Menu Item 1</div>
<div class="item">Menu Item 2</div>
<div class="item">Menu Item 3</div>
<div class="item">Menu Item 4</div>
<div class="item">Menu Item 5</div>
</div>
<!-- Script -->
<script src="script.js"></script>
</body>
</html>
CSS:
Next, we style the menu. To style the menu, we use CSS. Do copy the code below and paste it into your stylesheet.
Other Tutorial You Might Like:
- Responsive Footer Using HTML and CSS
- Overlap Text Effect | HTML & CSS
- Build Tabs Using HTML, CSS And Javascript
Â
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
background-color: #2c8df7;
}
#context-menu {
background-color: #ffffff;
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:
Finally, we add functionality to this context menu. To add this functionality, we use Javascript. Do copy the code below and paste it into your script file.
//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
events.forEach((eventType) => {
document.addEventListener(
eventType,
(e) => {
e.preventDefault();
//x and y position of mouse or touch
let mouseX = e.clientX || e.touches[0].clientX;
let mouseY = e.clientY || e.touches[0].clientY;
//height and width of menu
let menuHeight = contextMenu.getBoundingClientRect().height;
let menuWidth = contextMenu.getBoundingClientRect().width;
//width and height of screen
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)
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";
}
});
Your custom right-clicks context menu is now ready. If you have any problems while creating this project, you download the source code to fix those errors. To download the source code, simply click on the download code button below. Also, I would love to hear any ideas, suggestions and feedback from you. So feel free to drop them in the comments below.
Hello,
I find the menu really cool.
I’d have a question though : how do make items point/unfold into submenus ?
Thanks
Alex