Demo of menucreate event for JQuery UI menu
HTML
<ul id='my_menu'>
<li><div>Education</div></li>
<li><div>Job</div></li>
<li><div>Fruits</div>
<ul>
<li><div>Mango</div></li>
<li><div>Banana</div></li>
<li><div>Orange</div></li>
<li><div>Apple</div></li>
</ul>
</li>
<li><div>Vehicle</div></li>
<li><div>Games</div>
<ul>
<li><div>Football</div></li>
<li><div>Tennis</div>
<ul>
<li><div>Lawn Tennis</div></li>
<li><div>Table Tennis</div></li>
</ul>
</li>
<li><div>Golf</div></li>
<li><div>Badminton</div></li>
</ul></li>
<li><div>Dresses</div></li>
</ul>
</div><div class='col-md-8'>
<div id=d1>Event Message</div>
<div class='radio-inline'>
<label><input type='radio' name='r1' id='r2' value='destroy' >destroy</label>
</div>
<div class='radio-inline'>
<label><input type='radio' name='r1' id='r2' value='initialize' >initialize</label>
</div>
jquery
<script>
$(document).ready(function() {
////////////////
$( "#my_menu" ).menu({
});
////////
$("input:radio[name=r1]").click(function() {
var sel=$(this).val()
if(sel=='destroy'){
$( "#my_menu" ).menu( sel );
$('#d1').html( " <b>destroy method invoked</b>" );
}
if(sel=='initialize'){
$( "#my_menu" ).menu();
}
})
//////////////
$( "#my_menu" ).on( "menucreate", function( event, ui ) {
$('#d1').html( " <b>By Menucreate event</b>" );
});
///////////
})</script>