Создаем пользовательское контекстное меню: как в Google Docs

Быстрый ответ

Для отключения дефолтного контекстного меню примените событие contextmenu в JavaScript и метод event.preventDefault(). После этого можно разработать пользовательское меню с помощью HTML и CSS, размещая его в соответствии с координатами курсора event.pageX и event.pageY. Вот основное, что вам понадобится:

document.addEventListener('contextmenu', e => {
  e.preventDefault();  // Стандартное меню больше не будет вылезать!
  const menu = document.getElementById('custom-menu').style;
  menu.display = 'block';  // Показываем наш контекстное меню!
  menu.top = `${e.pageY}px`;
  menu.left = `${e.pageX}px`;
});

window.addEventListener('click', () => {
  document.getElementById('custom-menu').style.display = 'none'; // Делаем меню невидимым, когда нажимаем вне его пределов.
});

Учтите, что должен быть элемент HTML с id="custom-menu", который должен быть настроен на скрытие по умолчанию (display: none) до его вызова.

Все наборы: создание собственного контекстного меню

Для восхищения пользователей своим контекстным меню потребуется ваше творчество. Вы должны грамотно балансировать между дизайном и функциональностью, подобно составлению изысканного меню в ресторане высокой кухни.

Дизайн и функциональность меню

Дизайн вашего меню должен органично сочетаться с общим стилем сайта. Используйте CSS flexbox или grid, чтобы достичь максимальной адаптивности.

#custom-menu {
  display: none;
  position: absolute;
  z-index: 1000;
  /* Подстройте стили под свой вкус */
}

Главное — заполнить меню полезной функциональностью. Каждый элемент должен выполнять свою функцию. Присоединяйте нужные действия к событиям click пунктов меню.

Подробнее об этом расскажет наш спикер на видео

Доступность: не забывайте о специях

Достойный дизайн всегда доступен. Заботьтесь о том, чтобы пользователи могли комфортно навигировать по меню с помощью клавиатуры и читать его содержимое с экрана, применяя aria атрибуты.

Динамическое наполнение меню

Если нужно отобразить разное меню в разных контекстах, меняйте его содержимое на лету. Например, для изображений может быть использован свой набор опций. Вот как это можно реализовать на JavaScript:

document.addEventListener('contextmenu', e => {
  const clickedElement = e.target;

  let menuContent = '';
  if(clickedElement.matches('img')) {
    menuContent += '<a href="#">Сохранить изображение</a>';  // Контекстные пункты для изображений.
  } else {
    menuContent += '<a href="#">Общий пункт</a>';  // Общедоступные опции.
  }
  document.getElementById('custom-menu').innerHTML = menuContent; // Загружаем меню.
  // Не забывайте назначать функции пунктам меню.
});

Визуализация

Представим веб-страницу как ресторан, где каждое нажатие правой кнопкой – это запрос меню:

Стандартное Меню Браузера     Собственное Контекстное Меню
🌐👌🍔🍟🍦                       🌐👌🥗🥙🍰🍵

Когда происходит нажатие:

document.addEventListener('contextmenu', function(e) {
  e.preventDefault();  // Зачем обычное меню, если можно предложить нечто особенное?
  customMenu.style.display = 'block';  // Готовы к подаче!
});

Собственное меню готово к демонстрации:

👤🖱️👉🌐: **Стандартное Меню Скрыто**

🌐🍽️: "Что вам предложить?"

Добавьте свою изюминку

Сделайте использование меню ещё более приятным:

• Эффекты затухания: Примените CSS-переходы для плавного появления и исчезновения меню.
• Иконки: Добавьте визуальные акценты с помощью иконок, например Font Awesome.
• Обнаружение клика за пределами: Скрывайте меню, когда клик происходит за его пределами.

window.addEventListener('click', () => {
  document.getElementById('custom-menu').style.display = 'none'; // Завершаем банкет!
});

// Скрыть при нажатии на Escape
window.addEventListener('keydown', e => {
  if (e.key === 'Escape') {
    document.getElementById('custom-menu').style.display = 'none'; // Быстрое ухождение, как если бы ребёнок прячется от брокколи!
  }
});

Устранение неполадок в рецепте

Избегайте чрезмерной кастомизации: ваше решение не должно ухудшать впечатление от использования сайта, не отключайте полезные функции стандартного контекстного меню. Проверяйте кросс-браузерную совместимость и предусмотрите альтернативные варианты для устаревших браузеров, которые могут использовать attachEvent.

Полезные материалы

1. Создание пользовательского контекстного (правого клика) меню на JavaScript — SitePoint — Пошаговый путь к реализации контекстных меню.
2. Элемент: событие contextmenu – Веб-API | MDN — Руководства MDN по событиям контекстного меню.
3. jQuery contextMenu (2.x) — Интерактивное создание контекстных меню с помощью этого плагина для jQuery.
4. HTML5 Контекстное Меню — История внедрения контекстного меню HTML5.
5. Stack Overflow: Вопросы по созданию пользовательского контекстного меню JavaScript — Обсуждения и решения по созданию контекстных меню на JavaScript.