Всем привет. Сегодня мы сделаем меню, которое будет открываться по нажатию правой кнопки мыши на сайте через JavaScript. Это называется контекстное меню.
Когда вы в браузере кликаете правой кнопкой мыши по элементу, у вас открывается меню с определённым набором функций. Например, в Microsoft Edge открывается такое:
Бывают случаи, когда нужно поменять поведение контекстного меню или его содержимое. Например, нужно убрать его полностью или сделать меню с определёнными пунктами при нажатии на элемент.
Например, вы разрабатываете админ-панель или какой-нибудь онлайн редактор, это может быть редактор текста, редактор фото или что-то другое. Нужно сделать так, чтобы при нажатии на элемент открывалось меню с определёнными функциями.
Например, онлайн редактор сайтов Wix. При нажатии на элемент ПКМ открывается меню, это этот элемент можно скопировать, дублировать, удалить, анимировать или получить по нему какую-либо справку, что достаточно удобно.
Поведение обычного контекстного меню заложено браузером, через код сайта его изменить не получится. Можно только создать такое меню вручную.
Делать это мы будет на таком сайте
Начинаем работу.
1. Удаляем обычное контекстное меню
Для примера я буду делать контекстное меню, которое будет открываться при клике на картинку.
Создаём код JavaScript. Добавляем нашим картинкам какой-нибудь класс, по нажатию на который должно будет открываться меню.
В JavaScript подключаемся к нашим картинкам.
На наши картинки вешаем обработчик клика правой кнопкой мыши.
Записываем результаты этого события в переменную и через функцию "preventDefault()" отменяем стандартные действия браузера.
Мы убрали меню при клике ПКМ на картинку.
2. Верстаем контекстное меню
Создаём HTML код меню
Добавим ему стиль и зададим свойство "position: fixed", чтобы оно летало над объектами страницы и было привязано к самому экрану.
Добавим стили для списка и его элементов внутри меню
Добавляем класс "hide", чтобы открывать и закрывать меню
В классе hide можно было бы поставить стиль "display: none", но я сделал это другим образом. Через свойство "opacity" я сделал его полностью прозрачным, а через "pointer-events" некликабельным, что обеспечивает его исчезновение. Если просто написать "display: none", меню будет полностью исчезать, из за чего нельзя будет в любой момент перед открытием считывать его ширину и высоту.
Готово. Теперь приступаем к третьей части. Сделаем так, чтобы оно открывалось.
3. Открываем меню на JavaScript
Переходим в наш код, подключаемся к элементу по классу и убираем класс "hide" при каждом нажатии.
Меняем координаты нашему окну. Сделаем так, чтобы окно появлялось возле курсора, но отодвигалось от него на 10 пикселей по X и Y. Через JS поменяем параметр left и top в css стиле объекта. В CSS значения для этих свойств указываются в таком виде "10px". Просто задать цифру будет недостаточно, нужно задать значение в пикселях.
Меню появляется по нажатию правой кнопкой мыши, теперь сделаем так, чтобы оно исчезало при клике по сайту
Теперь наше меню открывается и закрывается.
Но если у нас получится так, что наше меню открывается возле правого края окна, оно может выехать за его пределы.
Исправим это. Создадим переменную, в которую будет записываться ширина нашего контекстного меню. Напоминаю, при свойстве "display: none" JavaScript не сможет считывать ширину окна. Для свойства left создаём условие. Если положение курсора (ev.clientX) + 10 + ширина меню (contextmenu_width) меньше ширины окна (window.innerWidth), то есть наше окно не выходит за правую границу, то наше окно будет появляться по обычным координатам.
Если наше окно выходит за правую границу, то оно будет появляться возле курсора, но поворачиваться в другую от него сторону.
То же самое делаем и для координаты Y
Подведём итоги
Вот такое контекстное меню у нас получилось:
В этой статье я вам показал, как сделать контекстное меню, которое будет открываться при нажатии на какой-либо предмет. Показал я вам, как сделать такое меню в целом, функционалом кнопок уже займётесь вы.
Если стало интересно, подписывайтесь на канал и ставьте лайки. Если есть, что добавить или обсудить, пишите в комментариях.