Demo of JQuery object to get option name & value of Menu JQuery UI

List of name value of options displayed above.

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>

jquery

<script>
$(document).ready(function() {
////////////////
$( "#my_menu" ).menu({
focus: function(event, ui) {
   $('#d1').html( " <b>Focus Item :  </b>" +ui.item.text() );
}
})
///////////////
var option_val=$("#my_menu").menu("option")
$('#d1').html( " <b>Position my:  </b>" +option_val.position.my );
$('#d1').append( "<br> <b>Position at:  </b>" +option_val.position.at );
$('#d1').append( "<br> <b>Disabled:  </b>" +option_val.disabled );
$('#d1').append( "<br> <b>role:  </b>" +option_val.role );
/////////////////
})
</script>