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>
<br />
<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">&nbsp;&#128295;&nbsp;</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">&nbsp;&#128295;&nbsp;</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">&nbsp;&#128295;&nbsp;</td>
    </tr>
</table>


    <ul id="menu" class="menuContent">
      <li><a href="#" onclick="alert('Logged User off Job');">Logoff Job</a></li>
      <li><a id='myPiLink' href="#" onclick="logoff(this);">Logoff <span id="MyPi"></span></a></li>
    </ul> 

<script>
	function logoff(e){
    //console.log(e.firstElementChild.innerHTML);
    alert("Logging Off 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;
}

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' });
          $("#MyPi").html(this.id);
          
          return false;
      });

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