JS - 마우스 오른쪽 클릭 메뉴 예제

oncontextmenu 이벤트는 오른쪽 마우스 버튼을 클릭했을 때 발생합니다. 아래 예제는 오른쪽 마우스 버튼을 클릭했을 때 하위 메뉴를 나타나게 합니다.

<style>
a { text-decoration:none; }
.smenu_hide { display: none; }
#mmenu a {
 margin: 5px;
 padding: 5px;
 background-color: #efefef;
}
#sub_menu {
 border: 3px solid #f2d0da;
 background-color: #f5dcb9;
 box-shadow: 5px 5px 5px 5px #e3dff0;
 padding: 0px 5px;
}
#sub_menu ul { padding: 0; list-style: none; }
#sub_menu li {
 list-style: none;
 padding: 0px 5px;
}
</style>

<h1>contextmenu</h1>
<div id="mmenu">
  <a href="#" class="test">링크 1</a>
  <a href="#" class="test">링크 2</a>
  <a href="#" class="test">링크 3</a>
  <a href="#" class="test">링크 4</a>
</div>
<div class="smenu_hide" id="sub_menu">
  <ul>
    <li><a href="http://www.habonyphp.com">하위 메뉴 1</a></li>
    <li><a href="http://www.habonyphp.com">하위 메뉴 2</a></li>
    <li><a href="http://www.habonyphp.com">하위 메뉴 3</a></li>
  </ul>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
if(document.getElementById('mmenu').addEventListener) {
  document.getElementById('mmenu').addEventListener('contextmenu', function(e) {
    $("#sub_menu").toggleClass("smenu_hide");
    $("#sub_menu").css({
      position: "absolute",
      top: e.pageY,
      left: e.pageX
    });
    e.preventDefault();
  }, false);
}

$(document).bind("click", function(event) {
  document.getElementById("sub_menu").className = "smenu_hide";
});
</script>