jQuery UI Menu

Show Hide menu on Click of Icon. Hide menu on Click on document.

by mikeskinner

HTML

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<table width="60%" border="0" align="center">
    <tr>
      <td>Item 1:1</td>
      <td>Item 2:1</td>
      <td>Item 3:1</td>
      <td>Item 4:1</td>
      <td id="RP100" class="showHideMenu" title="Tool Menu">&#8943;</td>
    </tr>
    <tr>
      <td>Item 1:2</td>
      <td>Item 2:2</td>
      <td>Item 3:2</td>
      <td>Item 4:2</td> 
      <td id="RP101" class="showHideMenu" title="Tool Menu">&#8943;</td>
    </tr>
    <tr>
      <td>Item 1:3</td>
      <td>Item 2:3</td>
      <td>Item 3:3</td>
      <td>Item 4:3</td>
      <td id="RP102" class="showHideMenu" title="Tool Menu">&#8943;</td>
    </tr>
</table>

<ul id="menu" class="menuContent">
  <li><a href="#" onclick="closeJob(this);">Log off Job  <span id="ClosePi"/></a></li>
  <li><a href="#" onclick="logoff(this);">Log off <span id="LogoffPi"/></a></li>
  <li><a href="#" onclick="message(this);">Message User <span id="MsgPi"/></a></li>
</ul> 

<script>
	function closeJob(e){
    alert("Closing Job on terminal " + e.firstElementChild.innerHTML);
  }
  function logoff(e){
    alert("Logging Off Terminal " + e.firstElementChild.innerHTML);
  }
  function message(e){
    alert("Sending a message to the user on terminal " + e.firstElementChild.innerHTML);
  }
</script>

CSS

.menuContent {
  position: absolute;
  text-align: left;
  font-size: 10px;
  width: 100px;
}
.showHideMenu {
  display:inline-block;
  font-weight: bold;
  cursor: pointer;
}
#ClosePi, #MsgPi {
  display: none;
}

JavaScript

$(document).ready(function () {

      $('#menu').hide();

      $('#menu').menu();

      $('.showHideMenu').click(function () {
          $('#menu').toggle();
    			$("#menu").css({ top: event.clientY + 'px' });
          $("#menu").css({ left: (event.clientX + 20) + 'px' });
          $("#ClosePi").html(this.id);
          $("#LogoffPi").html(this.id);
          $("#MsgPi").html(this.id);
          return false;
      });

      $(document).click(function () {
          $('#menu').hide();
      });
  });