JSFiddle - React, Tailwind, and code Playground

by Juan Muñoz

HTML

<ul id="rightmenu"> 
      <li class="first"><a href="#">Opcion 1</a></li> 
      <li><a href="#">Opcion 2</a></li> 
      <li class="last"><a href="#">Opcion 3</a></li> 
   </ul>

CSS

#rightmenu{ 
      display: none; 
      position: absolute; 
      z-index: 999; 
      background: #dedede; 
      border: 1px solid #ccc; 
      box-shadow: 0 1px 2px #bbb; 
      list-style: none; 
      padding:5px 9px; 
   } 
   #rightmenu li{ 
      padding: 2px 0; 
      border-bottom: 1px solid #f0f0f0; 
      border-top: 1px solid #ccc; 
   } 
   #rightmenu li.first{ 
      border-top: none; 
   } 
   #rightmenu li.last{ 
      border-bottom:none; 
   } 
   #rightmenu li a{ 
      text-shadow:0 0 1px white; 
      color:#333; 
      text-decoration: none; 
   } 
   #rightmenu li a:hover{ 
      color:#888; 
   }

JavaScript

$(document).ready(function(){ 
      $(document).bind("contextmenu",function(e){ 
         if($("#rightmenu").is(":visible")){ 
            $("#rightmenu").hide().slideToggle("fast").css({ 
               left:e.pageX, 
               top:e.pageY 
            }); 
         }else{ 
            $("#rightmenu").slideToggle("fast").css({ 
               left:e.pageX, 
               top:e.pageY 
            }); 
         } 
         return false; 
      }).click(function(){ 
         $("#rightmenu").hide(); 
      }); 
   });