Demo of focus event of JQuery UI Menu

You can change focus to different element by using above radio buttons. Focus event will be triggered and the item name will be displayed.

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 id=d1>Focus Event Message</div><br><br>
<div class='radio-inline'>
  <label><input type='radio' name='r1' id='r1' value='#item1'>Item 1</label>
</div>
<div class='radio-inline'>
  <label><input type='radio' name='r1' id='r2' value='#item2' >Item 2</label>
</div>
<div class='radio-inline'>
  <label><input type='radio' name='r1' id='r2' value='#item3' >Item 3</label>
</div>
<div class='radio-inline'>
  <label><input type='radio' name='r1' id='r2' value='#item4' >Item 4</label>
</div>
<div class='radio-inline'>
  <label><input type='radio' name='r1' id='r2' value='#item5' >Item 5</label>
</div>

jquery

<script>
$(document).ready(function() {
////////////////
$( "#my_menu" ).menu()
///////////////
$("input:radio[name=r1]").click(function() {
var sel=$(this).val()
	$( "#my_menu" ).menu( "focus", null, $("#my_menu").find( sel ) );
})
/////////////////
$( "#my_menu" ).on( "menufocus", function( event, ui ) {
 $('#d1').html( " <b>Focus Event :  </b>" +ui.item.text() );
} );
//////////////
})
</script>