Javascript Context Menu with Submenu

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

<div class="container">
  <h1>Context Menu with Submenu</h1>
  <p>Right click anywhere in the demo area below to open the custom context menu with submenus</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="new">
    <div class="menu-item-content">
      <i class="ion-plus-round"></i>
      <span>New</span>
    </div>
    <i class="ion-chevron-right arrow"></i>
    <div class="submenu">
      <div class="menu-item" data-action="new-file">
        <div class="menu-item-content">
          <i class="ion-document"></i>
          <span>File</span>
        </div>
      </div>
      <div class="menu-item" data-action="new-folder">
        <div class="menu-item-content">
          <i class="ion-folder"></i>
          <span>Folder</span>
        </div>
      </div>
      <div class="menu-item" data-action="new-project">
        <div class="menu-item-content">
          <i class="ion-briefcase"></i>
          <span>Project</span>
        </div>
      </div>
    </div>
  </div>

  <div class="menu-item" data-action="open">
    <div class="menu-item-content">
      <i class="ion-folder-open"></i>
      <span>Open</span>
    </div>
  </div>

  <div class="menu-divider"></div>

  <div class="menu-item" data-action="edit">
    <div class="menu-item-content">
      <i class="ion-edit"></i>
      <span>Edit</span>
    </div>
    <i class="ion-chevron-right arrow"></i>
    <div class="submenu">
      <div class="menu-item" data-action="cut">
        <div class="menu-item-content">
          <i class="ion-scissors"></i>
          <span>Cut</span>
        </div>
      </div>
      <div class="menu-item" data-action="copy">
        <div class="menu-item-content">
          <i class="ion-ios-copy"></i>
          <span>Copy</span>
        </div>
      </div>
      <div class="menu-item" data-action="paste">
        <div class="menu-item-content">
          <i class="ion-ios-browsers"></i>
          <span>Paste</span>
        </div>
      </div>
    </div>
  </div>

  <div class="menu-item" data-action="view">
    <div class="menu-item-content">
      <i class="ion-eye"></i>
      <span>View</span>
    </div>
    <i class="ion-chevron-right arrow"></i>
    <div class="submenu">
      <div class="menu-item" data-action="grid">
        <div class="menu-item-content">
          <i class="ion-grid"></i>
          <span>Grid View</span>
        </div>
      </div>
      <div class="menu-item" data-action="list">
        <div class="menu-item-content">
          <i class="ion-navicon-round"></i>
          <span>List View</span>
        </div>
      </div>
      <div class="menu-item" data-action="details">
        <div class="menu-item-content">
          <i class="ion-ios-list"></i>
          <span>Details</span>
        </div>
      </div>
    </div>
  </div>

  <div class="menu-divider"></div>

  <div class="menu-item" data-action="share">
    <div class="menu-item-content">
      <i class="ion-share"></i>
      <span>Share</span>
    </div>
    <i class="ion-chevron-right arrow"></i>
    <div class="submenu">
      <div class="menu-item" data-action="email">
        <div class="menu-item-content">
          <i class="ion-email"></i>
          <span>Email</span>
        </div>
      </div>
      <div class="menu-item" data-action="link">
        <div class="menu-item-content">
          <i class="ion-link"></i>
          <span>Copy Link</span>
        </div>
      </div>
      <div class="menu-item" data-action="social">
        <div class="menu-item-content">
          <i class="ion-social-buffer"></i>
          <span>Social Media</span>
        </div>
      </div>
    </div>
  </div>

  <div class="menu-item" data-action="delete">
    <div class="menu-item-content">
      <i class="ion-trash-a"></i>
      <span>Delete</span>
    </div>
  </div>

  <div class="menu-divider"></div>

  <div class="menu-item" data-action="properties">
    <div class="menu-item-content">
      <i class="ion-information-circled"></i>
      <span>Properties</span>
    </div>
  </div>
</div>

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

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: linear-gradient(135deg, #c31432 0%, #240b36 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;
  justify-content: space-between;
  padding: 12px 16px;
  color: #333;
  font-size: 14px;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.2s ease;
  user-select: none;
  position: relative;
}

.menu-item-content {
  display: flex;
  align-items: center;
  gap: 12px;
}

.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-item .arrow {
  font-size: 14px;
  margin-left: auto;
}

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

/* Submenu Styles */
.submenu {
  position: absolute;
  left: 100%;
  top: 0;
  margin-left: 5px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  padding: 8px;
  min-width: 180px;
  display: none;
  animation: submenuFadeIn 0.15s ease;
}

@keyframes submenuFadeIn {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.menu-item:hover .submenu {
  display: block;
}

.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 allMenuItems = 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
  setTimeout(() => {
    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';
    }
  }, 0);
});

// Handle menu item clicks
allMenuItems.forEach(item => {
  item.addEventListener('click', (e) => {
    // Don't close menu if item has submenu
    if (item.querySelector('.submenu')) {
      e.stopPropagation();
      return;
    }

    const action = item.dataset.action;
    const actionText = item.textContent.trim();

    if (action) {
      // 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');
  }
});

// Prevent context menu on the context menu itself
contextMenu.addEventListener('contextmenu', (e) => {
  e.preventDefault();
});