Super Simple Navigable Html List Plugin with jQuery - listy

listy is a super tiny jQuery plugin that just makes the standard html list navigable with Keyboard or mouse wheel.

How to use it:

1. Include jQuery library and jQuery listy plugin before </body> tag

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
<script src="js/jquery.listy.js" type="text/javascript"></script> 

2. Create a html list with class of listy

<ul tabindex='0' class='listy'>
<li>elem 1</li>
<li>elem 2</li>
<li>elem 3</li>
...
</ul>

3. The CSS

.listy {
position: relative;
list-style-type: none;
padding: 0;
margin: 0;
width: 100%;
height: 500px;
overflow-y: auto;
background-color: #ffffff;
border: 1px solid #cccccc;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
-moz-transition: border linear 0.2s, box-shadow linear 0.2s;
-o-transition: border linear 0.2s, box-shadow linear 0.2s;
transition: border linear 0.2s, box-shadow linear 0.2s;
}
.listy li {
font-size: 1.5em;
padding: 1em 1em;
border-bottom: 1px #ddd solid;
cursor: pointer;
}
.listy-hover {
background: #f5f5f5;
}
.listy-focus {
border-color: rgba(82, 168, 236, 0.8);
outline: 0;
outline: thin dotted \9;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
}
.listy-selected {
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
background-color: #0088cc;
}

4. Call the plugin

<script>
$(function(){
  $('.listy').listy();
});
</script> 

---

This awesome jQuery plugin is developed by lou. For more Advanced Usages, please check the demo page or visit the official website.