Пример:
HTML:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div class="context-menu"> Нажмите правую кнопку мыши </div> <div class="context-menu"> Нажмите правую кнопку мыши </div> <div class="context-menu-open"> <ul> <li>Ссылка 1</li> <li>Ссылка 2</li> <li>Ссылка 3</li> </ul> </div> |
CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
.context-menu { border: 4px solid #337AB7; background: #BFE2FF; width: 180px; height: 100px; display: inline-flex; text-align: center; align-items: center; margin: 20px; } .context-menu-open { display: none; position: fixed; z-index: 99999; top: 0; left: 0; box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.54); background-color: white; border-radius: 4px; padding: 4px; } .context-menu-open ul { padding: 0; margin: 0; } .context-menu-open ul li { cursor: pointer; list-style: none; padding: 10px 12px; margin: 0; border-bottom: 1px solid #BFE2FF; } .context-menu-open ul li:last-child { border-bottom: 1px solid transparent; } .context-menu-open ul li:hover { background-color: #BFE2FF; } |
JS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
let contextMenu = document.querySelectorAll('.context-menu'); let contextMenuOpen = document.querySelector('.context-menu-open'); for (let i = 0; i < contextMenu.length; i++){ contextMenu[i].addEventListener('contextmenu', function(e) { e.preventDefault(); contextMenuOpen.style.left = e.clientX + 'px'; contextMenuOpen.style.top = e.clientY + 'px'; contextMenuOpen.style.display = 'block'; }); } window.addEventListener('click', function() { contextMenuOpen.style.display = 'none'; }); |
JQUERY:
|
1 2 3 4 5 6 7 8 9 |
let = contextMenu = $('.context-menu-open'); $('.context-menu').on('contextmenu', function (e) { e.preventDefault(); contextMenu.css({top: e.clientY + 'px', left: e.clientX + 'px' }); contextMenu.show(); }); $(document).on('click', function () { contextMenu.hide(); }); |
$('.context-menu').on('contextmenu', function (e) {
Скажите, что значит 'contextmenu', вроде селектор, но не пойму.
.context-menu - селектор
contextmenu - событие
Привет!
А как это будет выглядеть на vanilla js? Возможно ли сделать без Jquery?
Добавил код