Context Menu

                          
<ul class="mouseMenu">
<li><a href="#">메뉴1</a></li>
<li><a href="#">메뉴2</a></li>
<li><a href="#">메뉴3</a></li>
<li><a href="#">메뉴4</a></li>
</ul>

                          
.mouseMenu{display:none; position:absolute; z-index:10000; padding:10px 0;border:1px solid #ccc; border-radius:4px; background:#f5f5f5;
li{width:150px; padding:5px; font-family: 'Noto Sans';
  &:hover{background:#dee1e7;}
  a{display: block;}
}
}

                          
.mouseMenu {
  display: none;
  position: absolute;
  z-index: 10000;
  padding: 10px 0;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #f5f5f5;
}

.mouseMenu li {
  width: 150px;
  padding: 5px;
  font-family: 'Noto Sans';
}

.mouseMenu li:hover {
  background: #dee1e7;
}

.mouseMenu li a {
  display: block;
}

                          
$('').on({
'contextmenu': function (e){
    if(e.pageX > $(window).width()-$('.mouseMenu').outerWidth() && e.pageY > $(window).height()-$('.mouseMenu').outerHeight()){
      $('.mouseMenu').css({left:e.pageX-$('.mouseMenu').outerWidth(),top:e.pageY-$('.mouseMenu').outerHeight()}).show();
    }else if(e.pageX <= $(window).width()-$('.mouseMenu').outerWidth() && e.pageY > $(window).height()-$('.mouseMenu').outerHeight()){
      $('.mouseMenu').css({left:e.pageX,top:e.pageY-$('.mouseMenu').outerHeight()}).show();
    }else if(e.pageX > $(window).width()-$('.mouseMenu').outerWidth() && e.pageY <= $(window).height()-$('.mouseMenu').outerHeight()){
      $('.mouseMenu').css({left:e.pageX-$('.mouseMenu').outerWidth(),top:e.pageY}).show();
    }else{
      $('.mouseMenu').css({left:e.pageX,top:e.pageY}).show();
    }
  }
});

Result

마우스 우클릭을 해보세요!

Esc 혹은 우측 상단 X 버튼을 눌러 결과창을 닫을 수 있습니다.