Demo of focus method 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({
focus: function(event, ui) {
$('#d1').html( " <b>Focus Item : </b>" +ui.item.text() );
}
})
///////////////
$("input:radio[name=r1]").click(function() {
var sel=$(this).val()
$( "#my_menu" ).menu( "focus", null, $("#my_menu").find( sel ) );
})
/////////////////
})
</script>