menu minwidth

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>
<h2> my menu </h2>
<div id='mymenudiv_id'>
  <ul id='menu_id'>
    <li>-</li>
    <li>the_system</li>
    <li>the_agenda</li>
  </ul>
</div> 
<h2  id='width_id'>-...-</h2>

JavaScript

var mymenu;
$(document).ready(function() {
  mymenu = $("#menu_id");
  var mywidth = 40;
  mymenu.children("li").each(function(ix, el) {
    console.log("menu-children ix=", ix, " el=", el);
     var elw = $(el).width();
     console.log("menu-children ix=",ix, " elw=", elw);
     if (mywidth<elw)
        mywidth = elw;
  });
  $("#width_id").html("mywidth="+mywidth.toFixed(0));
  mymenu.menu({
    select: function(ev, ui) {
      console.log("menu-select ev=", ev, " ui=", ui);
    }
  })
})