In this Elementor tutorial I will show you how to pull off this cool “right click” secret menu.
I came across this idea from the Arcade website and thought it would be fun to recreate it in Elementor.
Website Links:
Timestamps:
- 0:00 Introduction
- 0:56 No Animation Example
- 7:13 CSS Animation Example
No Animation CSS Code
#rtmenu{display:none;}
No Animation JavaScript Code
<script>
document.addEventListener('DOMContentLoaded', function () {
const mainLogo = document.getElementById('mainlogo');
const rtMenu = document.getElementById('rtmenu');
// Function to show the context menu
function showContextMenu(event) {
event.preventDefault();
rtMenu.style.display = 'block';
}
// Function to hide the context menu
function hideContextMenu() {
rtMenu.style.display = 'none';
}
// Event listener for right-click on the main logo
mainLogo.addEventListener('contextmenu', showContextMenu);
// Event listener for clicking anywhere outside the context menu
document.addEventListener('click', function (event) {
if (!rtMenu.contains(event.target)) {
hideContextMenu();
}
});
// Prevent hiding the menu when clicking inside it
rtMenu.addEventListener('click', function (event) {
event.stopPropagation();
});
});
</script>
Animation CSS Code
#rtmenu {
transition: all 320ms cubic-bezier(0.18, 0.88, 0.32, 1.27);
transform-origin: top left;
transform: translate(0px, 5px) scale(0.5);
opacity: 0;
visibility: hidden;
}
#rtmenu.visible {
opacity: 1;
visibility: visible;
transform: translate(0px, 10px) scale(1);
}
Animation JavaScript Code
<script>
document.addEventListener('DOMContentLoaded', function () {
const mainLogo = document.getElementById('mainlogo');
const rtMenu = document.getElementById('rtmenu');
// Function to show the context menu with animation
function showContextMenu(event) {
event.preventDefault();
rtMenu.classList.add('visible');
}
// Function to hide the context menu with reverse animation
function hideContextMenu() {
rtMenu.classList.remove('visible');
}
// Event listener for right-click on the main logo
mainLogo.addEventListener('contextmenu', showContextMenu);
// Event listener for clicking anywhere outside the context menu
document.addEventListener('click', function (event) {
if (!rtMenu.contains(event.target)) {
hideContextMenu();
}
});
// Prevent hiding the menu when clicking inside it
rtMenu.addEventListener('click', function (event) {
event.stopPropagation();
});
});
</script>
