title: Add standard right-click options to custom right-click
body: <p>I would like to add standard options, such as inspect element, view source, etc. to custom right-click if this is possible.</p>
  
  <p>Here's my JavaScript...</p>
  
  
  
  <pre><code>&lt;script type="text/javascript"&gt;
    $(document).bind("contextmenu", function (event) {
  
      // Avoid the real one
      event.preventDefault();
  
      // Show contextmenu
      $(".custom-menu").finish().toggle(100).
  
      // In the right position (the mouse)
      css({
          top: event.pageY + "px",
          left: event.pageX + "px"
      });
  });
  
  
  // If the document is clicked somewhere
  $(document).bind("mousedown", function (e) {
  
      // If the clicked element is not the menu
      if (!$(e.target).parents(".custom-menu").length &gt; 0) {
  
          // Hide it
          $(".custom-menu").hide(100);
      }
  });
  
  
  // If the menu element is clicked
  $(".custom-menu li").click(function(){
  
      // This is the triggered action name
      switch($(this).attr("data-action")) {
  
          // A case for each action. Your actions here
          case "first": alert("first"); break;
          case "second": alert("second"); break;
          case "third": alert("third"); break;
          case "fourth": alert("fourth"); break;
          case "fifth": alert("fifth"); break;
          case "sixth": alert("sixth"); break;
          case "seventh": alert("seventh"); break;
      }
  
      // Hide it AFTER the action was triggered
      $(".custom-menu").hide(100);
    });
  &lt;/script&gt;
  </code></pre>
  
  <p>Here's my CSS...</p>
  
  <pre><code>.custom-menu {
      display: none;
      z-index: 1000;
      position: absolute;
      overflow: hidden;
      border: 1px solid #CCC;
      white-space: nowrap;
      font-family: sans-serif;
      background: #FFF;
      color: #333;
      border-radius: 5px;
      padding: 0;
  }
  
  .custom-menu a {
      text-decoration:none;
      color:#333;
  }
  
  
  .custom-menu li {
      padding: 8px 12px;
      cursor: pointer;
      list-style-type: none;
  }
  
  .custom-menu li:hover {
      background-color: #DEF;
  }
  </code></pre>
  
  <p>Here's my HTML...</p>
  
  <pre><code>&lt;ul class='custom-menu'&gt;
    &lt;li data-action="first"&gt;&lt;a href="/"&gt;Home&lt;/a&gt;&lt;/li&gt;
    &lt;li data-action="second"&gt;&lt;a href="/profile.php?id=&lt;?php echo $memberID; ?&gt;"&gt;Profile&lt;/a&gt;&lt;/li&gt;
    &lt;li data-action="third"&gt;&lt;a href="/friends.php"&gt;Friends&lt;/a&gt;&lt;/li&gt;
    &lt;li data-action="fourth"&gt;&lt;a href="/messages.php"&gt;Messages&lt;/a&gt;&lt;/li&gt;
    &lt;li data-action="fifth"&gt;&lt;a href="/settings.php"&gt;Settings&lt;/a&gt;&lt;/li&gt;
    &lt;li data-action="sixth"&gt;&lt;a href="/apps.php"&gt;Apps&lt;/a&gt;&lt;/li&gt;
    &lt;li data-action="seventh"&gt;&lt;a href="/logout.php"&gt;Logout&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>What I have currently works and is looking good.  I would prefer to keep it the same way.  Just with the added options.  I would greatly appreciate it Thank You very much.</p>