<header>
  <h2 class="title">contextmenu (HTML Event)</h2>
  <p class="description">Спрацьовує при виклику контекстного меню правою кнопкою миші.</p>
</header>
<main>
  <div class="result">
    <div id="textBlock" class="text-block">Клацніть правою кнопкою миші, щоб відкрити контекстне меню.</div>
    <ul id="customMenu" class="custom-menu">
      <li id="copyText">Копіювати текст</li>
      <li id="changeColor">Змінити колір фону</li>
      <li id="deleteText">Видалити текст</li>
    </ul>
  </div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  position: relative;
}

.text-block {
  padding: 20px;
  background-color: #e7e7e7;
  cursor: pointer;
}

.custom-menu {
  display: none;
  position: absolute;
  background-color: #ffffff;
  border: 1px solid #ccc;
  list-style: none;
  padding: 5px 0;
  margin: 0;
  width: 150px;
  box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.2);
  z-index: 1000;
}

.custom-menu li {
  padding: 8px 12px;
  cursor: pointer;
}

.custom-menu li:hover {
  background-color: #f0f0f0;
}

document.addEventListener('DOMContentLoaded', function() {
  const textBlock = document.getElementById('textBlock');
  const customMenu = document.getElementById('customMenu');
  const copyTextOption = document.getElementById('copyText');
  const changeColorOption = document.getElementById('changeColor');
  const deleteTextOption = document.getElementById('deleteText');

  // Показуємо кастомне контекстне меню
  textBlock.addEventListener('contextmenu', function(event) {
    event.preventDefault(); // Відміняємо стандартне контекстне меню
    customMenu.style.display = 'block';
    customMenu.style.top = `${event.clientY-100}px`;
    customMenu.style.left = `${event.clientX}px`;
  });

  // Ховаємо контекстне меню при натисканні будь-де
  document.addEventListener('click', function(event) {
    customMenu.style.display = 'none';
  });

  // Копіюємо текст
  copyTextOption.addEventListener('click', function() {
    navigator.clipboard.writeText(textBlock.textContent).then(() => {
      alert('Текст скопійовано!');
    });
  });

  // Змінюємо колір фону
  changeColorOption.addEventListener('click', function() {
    textBlock.style.backgroundColor = '#d1ffd1'; // Наприклад, змінюємо на світло-зелений
  });

  // Видаляємо текст
  deleteTextOption.addEventListener('click', function() {
    textBlock.textContent = 'Текст було видалено.';
  });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.