疑似コンテキストメニュー

コンテキストメニューを無効、別途メニューを表示

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

サンプル

最新の記事

プロフィール

流されるままにウェブ業界で仕事しています。
主にLAPP環境でPHPを書いています。
最近はjQueryをよく書いています。