Javascript Popup Menu on Right Click

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">

<div class="container">
  <h1>Right Click Context Menu</h1>
  <p>Right click anywhere in the demo area below to open the custom context menu</p>

  <div class="demo-area" id="demoArea">
    <div class="demo-text">Right Click Here</div>
  </div>

  <div class="status" id="status">
    Waiting for action...
  </div>
</div>

<!-- Context Menu -->
<div class="context-menu" id="contextMenu">
  <div class="menu-item" data-action="copy">
    <i class="ion-ios-copy"></i>
    <span>Copy</span>
  </div>
  <div class="menu-item" data-action="paste">
    <i class="ion-ios-browsers"></i>
    <span>Paste</span>
  </div>
  <div class="menu-divider"></div>
  <div class="menu-item" data-action="edit">
    <i class="ion-edit"></i>
    <span>Edit</span>
  </div>
  <div class="menu-item" data-action="delete">
    <i class="ion-trash-a"></i>
    <span>Delete</span>
  </div>
  <div class="menu-divider"></div>
  <div class="menu-item" data-action="share">
    <i class="ion-share"></i>
    <span>Share</span>
  </div>
  <div class="menu-item" data-action="download">
    <i class="ion-ios-download"></i>
    <span>Download</span>
  </div>
</div>   

  * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        .container {
            background: white;
            border-radius: 16px;
            padding: 60px 40px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
            max-width: 600px;
            width: 100%;
            text-align: center;
        }

        h1 {
            color: #333;
            font-size: 32px;
            margin-bottom: 16px;
        }

        p {
            color: #666;
            font-size: 16px;
            line-height: 1.6;
            margin-bottom: 30px;
        }

        .demo-area {
            background: linear-gradient(135deg, #f093fb15 0%, #f5576c15 100%);
            border: 2px dashed #f093fb;
            border-radius: 12px;
            padding: 80px 40px;
            cursor: context-menu;
            transition: all 0.3s ease;
        }

        .demo-area:hover {
            background: linear-gradient(135deg, #f093fb25 0%, #f5576c25 100%);
            border-color: #f5576c;
        }

        .demo-text {
            color: #f5576c;
            font-size: 18px;
            font-weight: 600;
        }

        /* Context Menu Styles */
        .context-menu {
            position: fixed;
            background: white;
            border-radius: 12px;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
            padding: 8px;
            min-width: 200px;
            z-index: 1000;
            display: none;
            animation: menuFadeIn 0.2s ease;
        }

        @keyframes menuFadeIn {
            from {
                opacity: 0;
                transform: scale(0.95) translateY(-10px);
            }
            to {
                opacity: 1;
                transform: scale(1) translateY(0);
            }
        }

        .context-menu.active {
            display: block;
        }

        .menu-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 16px;
            color: #333;
            font-size: 14px;
            cursor: pointer;
            border-radius: 8px;
            transition: all 0.2s ease;
            user-select: none;
        }

        .menu-item:hover {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
            color: white;
        }

        .menu-item i {
            font-size: 18px;
            width: 20px;
            text-align: center;
        }

        .menu-divider {
            height: 1px;
            background: #e0e0e0;
            margin: 8px 0;
        }

        .status {
            margin-top: 20px;
            padding: 16px;
            background: #f5f5f5;
            border-radius: 8px;
            color: #666;
            font-size: 14px;
            min-height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .status.active {
            background: linear-gradient(135deg, #f093fb15 0%, #f5576c15 100%);
            color: #f5576c;
            font-weight: 600;
        }

   const demoArea = document.getElementById('demoArea');
        const contextMenu = document.getElementById('contextMenu');
        const status = document.getElementById('status');
        const menuItems = document.querySelectorAll('.menu-item');

        // Prevent default context menu and show custom menu
        demoArea.addEventListener('contextmenu', (e) => {
            e.preventDefault();
            
            // Get mouse position
            const x = e.clientX;
            const y = e.clientY;
            
            // Show menu
            contextMenu.classList.add('active');
            
            // Position menu at cursor
            contextMenu.style.left = x + 'px';
            contextMenu.style.top = y + 'px';
            
            // Check if menu goes off screen
            const menuRect = contextMenu.getBoundingClientRect();
            const windowWidth = window.innerWidth;
            const windowHeight = window.innerHeight;
            
            // Adjust horizontal position if needed
            if (menuRect.right > windowWidth) {
                contextMenu.style.left = (windowWidth - menuRect.width - 10) + 'px';
            }
            
            // Adjust vertical position if needed
            if (menuRect.bottom > windowHeight) {
                contextMenu.style.top = (windowHeight - menuRect.height - 10) + 'px';
            }
        });

        // Handle menu item clicks
        menuItems.forEach(item => {
            item.addEventListener('click', () => {
                const action = item.dataset.action;
                const actionText = item.textContent.trim();
                
                // Update status
                status.textContent = `Action: ${actionText}`;
                status.classList.add('active');
                
                // Hide menu
                contextMenu.classList.remove('active');
                
                // Reset status after 3 seconds
                setTimeout(() => {
                    status.textContent = 'Waiting for action...';
                    status.classList.remove('active');
                }, 3000);
            });
        });

        // Close menu when clicking outside
        document.addEventListener('click', (e) => {
            if (!contextMenu.contains(e.target)) {
                contextMenu.classList.remove('active');
            }
        });

        // Close menu on escape key
        document.addEventListener('keydown', (e) => {
            if (e.key === 'Escape') {
                contextMenu.classList.remove('active');
            }
        });

        // Prevent menu from going off screen on window resize
        window.addEventListener('resize', () => {
            if (contextMenu.classList.contains('active')) {
                contextMenu.classList.remove('active');
            }
        });