menu fading

by Tilwin Joy

HTML

<script src="https://code.jquery.com/jquery-2.2.0.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<p>
  See <a href='http://stackoverflow.com/q/34818540/841108'>this SO question</a>
</p>
<h2> my menu </h2>
<p class='explaincl'>
  First, try clicking the button, and do nothing more: the menu disappears in 10 sec. Then, try again, click the button, move the mouse inside the menu, it is still disappearing but I want it to stay!</p>
<button id='mybutton_id'>click me</button>
<div id='mymenudiv_id'>
  Here
</div>
<p id='message_id'>
</p>

CSS

ul.menucl {
  background-color: lightpink;
  color: navy;
  font-size: 80%;
  display: inline-block;
}

p.explaincl {
  font-size: 75%;
}

JavaScript

var mymenu;
var mybutton;
var count = 0;

function remove_menu() {
  if (!mymenu) return;
  console.log("removing mymenu=", mymenu);
  mymenu.remove();
}
$(document).ready(function() {
  mybutton = $("#mybutton_id");
  mybutton.on("click", function() {
    count++;
    var menuid = "menuid_" + count;
    $("#mymenudiv_id").append("<ul class='menucl' id='" + menuid + "'</ul>");
    mymenu = $("#" + menuid);
    mymenu.append("<li>first</li><li>counting " + count + "</li><li>last</li>")
    mymenu.menu({
      select: function(ev, ui) {
        console.log("selected ui=", ui);
        $("#message_id").html("<b>selected</b> <i>" + ui.item.text() + "</i> menu#" + count);
      },
      focus: function(e, ui) {
        console.log('focus');
        clearTimeout($(this).data('timeout'));
      }
    });
    mymenu.on('menublur', function(e, ui) {
      console.log('blur');
      var timeout = setTimeout(function() {
        console.log("fading mymenu=", mymenu);
        mymenu.delay(100).fadeOut(900, remove_menu);
      }, 9000);
      $(this).data('timeout', timeout);
    });
    mymenu.trigger('menublur');
  });
});