menu fading

by Basile Starynkevitch

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);
      }
    });
    mymenu.mousemove(function(ev){
      console.log ("mousemove ev=", ev);
      mymenu.finish();
    })
    setTimeout
      (function() {
        console.log ("fading mymenu=", mymenu);
        mymenu.delay(100).fadeOut(900,remove_menu);
      }, 
    9000);
  })
})