This topic is very cool and interesting. On your html page if you have an un-ordered list with thousands of list items then it becomes very difficult in navigating those list items. Searching one item requires lot of hard work and time. For this purpose we are going to use a Jquery plugin listnav. This plugin is quite simple to use and requires no special technicalities. We will make a simple list and use the library with it. All the work behind will be done by this library. First of all

1. Include the required listnav.css in the document <head> section.

1 <link rel="stylesheet" href="css/listnav.css">

2. Include the needed jQuery JavaScript library and the jQuery listnav plugin’s script at the bottom of the document.

1 <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
2 <script src="js/jquery-listnav.js"></script>

When you are done with adding these links in your head and footer section, the next step is to just call the listnav() function and you are done with it.

Lets do it practically.

<ul id=”items>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>