Keyboard Navigable jQuery plugin
https://github.com/sebastien-roch/keyboard-navigable/blob/master/keyboard-navigable.jquery.js
HTML
<script src="https://rawgithub.com/sebastien-roch/keyboard-navigable/master/keyboard-navigable.jquery.js"></script>
<br >
<p>Hold the ctrl key and press arrow up/down to move in the list</p>
<menu id="menu">
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
</menu>
CSS
.active {
font-weight: bold;
background-color: #369;
color: #FFF;
}
li {
list-style-type: none;
height:23px;
padding-left: 10px;
}
#menu {
width:160px;
height:150px;
overflow: auto;
}
JavaScript
$('menu').keyboardNavigable('li', {
onAccess: function() {alert('you clicked ' + $(this).text())},
noMeta: [13],
mouseNavigation: false,
metaKey: null
});
alert('Because of how jsfiddle works, you need to click on the result iframe before trying');