For that I have taken the jQuery UI menu with categories example and have just added VALUE="some_number" attribute to each <LI>-element:

1. <ul id="menu"> <li class="ui-widget-header"> Category 1 </li> <li value="1"> Option 1 </li> <li value="2"> Option 2 </li> <li value="3"> Option 3 </li> <li class="ui-widget-header"> Category 2 </li> <li value="4"> Option 4 </li> <li value="5"> Option 5 </li> <li value="6"> Option 6 </li> </ul>

Then I am trying to retrieve and display that value in an alert on a button click:

1. $("#menu").menu({ items: '> :not(.ui-widget-header)' }); $('#btn').button().click(function(ev) { ev.preventDefault(); var value = $('#menu').val();  // var value = $('#menu li').attr('value');
    alert('Selected menu value: ' + value); });

but the .val() seems to be a bad choice here, I probably need to go through $("#menu") for that?

Also I wonder, why are the list items highlighted on hover and on item selection in the jQuery example - but not in my jsFiddle?

Thank you
Alex