疑似コンテキストメニュー
コンテキストメニューを無効、別途メニューを表示
jQuery
$(function() {
// 右クリック
$(document).on('contextmenu', function(e) {
// 座標を取得して疑似メニュー表示
// X：水平の位置座標、Y：垂直の位置座標
$('#menu').css({
top: e.pageY + 5,
left: e.pageX + 5
}).show();
// 通常のコンテキストメニュー は非表示
return false;
});
$(document).click(function() {
// 疑似メニューを閉じる
$('#menu').hide();
});
});
HTML
<div id="menu"></div>
CSS
#menu {
display: none;
position: fixed;
z-index: 9999;
width: 100px;
height: 100px;
padding: 5px;
border: solid 1px;
box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
background: #fff;
}
サンプル
