Настраиваемое контекстное меню на элементе

Пример:

HTML:

<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>

Нажмите правую кнопку мыши

</div>

Нажмите правую кнопку мыши

</div>

<ul>

<li>Ссылка 1</li>

<li>Ссылка 2</li>

<li>Ссылка 3</li>

</ul>

</div>

CSS:

.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;
}

.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:

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';
});

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:

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();
});

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();

});

Пример:

HTML:

CSS:

JS:

JQUERY:

Смотрите также:

Добавить комментарий:

Комментарии: