Hello readers, today in this blog you'll learn how to create custom context or right-click menu design using HTML, CSS, and Javascript. In our previous blog, we saw how to create an awesome calculator design using HTML, CSS, and Javascript. Now it's time to create a custom right-click menu. I've also shared many projects related to Javascript. Don't forget to check here.
The context menu is a menu used in a graphical user interface. That appears upon user interaction, such right-click operation menu. A context menu offers a limited set of choices that are available in the current state, or context, of the operating system or application to which the menu belongs.
In this design [Custom Context or Right Click Menu Design] we have a menu. It triggers when the user right-clicks in anywhere on the page. This is a very simple and beautiful design as you can see in the image above. If you're unable to understand what am I trying to say So you can check the source code and preview as well.
Preview is available here.
Source Code [Custom Context or Right Click Menu]
HTML Code
<!-- ----------------- Created By InCoder ----------------- -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Right Click Menu - InCoder</title>
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" />
</head>
<body>
<div class="inMenu">
<ul class="menuItems">
<li><i class="fa-solid fa-arrow-left"></i>Back</li>
<li><i class="fa-solid fa-arrow-rotate-left"></i>Reload</li>
<li><i class="fa-solid fa-copy"></i>Copy</li>
<li><i class="fa-solid fa-clipboard"></i>Paste</li>
<div class="dropdown">
<li><i class="fa-solid fa-folder-plus"></i>New <i class="fa-solid fa-angle-right"></i></li>
<div class="dropdownBox">
<li><i class="fa-solid fa-folder-plus"></i>New Folder</li>
<li><i class="fa-solid fa-file-arrow-up"></i>Upload File</li>
<li><i class="fa-solid fa-floppy-disk"></i>Save as File</li>
</div>
</div>
<li><i class="fa-solid fa-magnifying-glass"></i>Search</li>
</ul>
</div>
</body>
</html>
CSS Code
/* ----------------- Created By InCoder ----------------- */
@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");
* {
margin: 0;
padding: 0;
font-family: "Poppins", sans-serif;
}
body {
height: 100vh;
background: #f5275f;
}
.inMenu {
display: none;
max-width: 13rem;
width: 13rem;
position: absolute;
border-radius: 0.5rem;
background-color: #fff;
box-shadow: 0px 0px 8px rgba(255, 255, 255, 0.3);
}
.inMenu .menuItems li {
margin: 6px 0;
display: flex;
font-size: 18px;
list-style: none;
cursor: pointer;
padding: 10px 12px;
align-items: center;
}
.inMenu .menuItems li:first-child {
margin-top: 0;
}
.inMenu .menuItems li:last-child {
margin-bottom: 0;
}
.dropdown {
position: relative;
}
.inMenu .fa-angle-right {
position: absolute;
right: 0.8rem;
}
.inMenu .menuItems li i {
font-size: 20px;
padding: 0px 10px;
}
.inMenu .menuItems li:hover {
background-color: rgba(0, 0, 0, 0.05);
}
.dropdownBox {
top: 0;
opacity: 0;
right: -8%;
max-width: 13rem;
position: absolute;
transition: all 0.4s;
border-radius: 0.5rem;
background-color: #fff;
transform: translateX(-10px);
}
.dropdown:hover .dropdownBox {
opacity: 1;
transform: translateX(0px);
}
Javascript Code
let rightMenu = document.querySelector(".inMenu"),
newMenu = rightMenu.querySelector(".dropdownBox");
document.addEventListener("contextmenu", (e) => {
e.preventDefault();
let x = e.offsetX,
y = e.offsetY,
winWidth = window.innerWidth,
winHeight = window.innerHeight,
cmWidth = rightMenu.offsetWidth,
cmHeight = rightMenu.offsetHeight;
if (x > winWidth - cmWidth - newMenu.offsetWidth) {
newMenu.style.left = "-102%";
} else {
newMenu.style.left = "";
newMenu.style.right = "-83%";
}
x = x > winWidth - cmWidth ? winWidth - cmWidth - 5 : x;
y = y > winHeight - cmHeight ? winHeight - cmHeight - 5 : y;
rightMenu.style.left = `${x}px`;
rightMenu.style.top = `${y}px`;
rightMenu.style.display = "block";
});
document.body.addEventListener("click", function (e) {
if (!rightMenu.contains(e.target)) {
rightMenu.style.display = "none";
}
});
Top comments (0)