Right Click Hidden Menu Trick

June 18, 2024

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>

*Some of the links on this page are affiliate links, meaning we may receive a commission if you follow them. This allows us to continue providing free content and educational resources for you. Thank you for supporting our small business!

Share this post: