Select Page

A couple of wees ago I wrote a piece of javascript for the new Wooboard interface. The problem was that there was a tabbing navigation that needed to support many more items than could fit in the screen. This navigation changed depending on what challenges were set. There could be 1 or as many as 100 navigation elements. When the navigation was small enough to fit inside the containing element, then the navigation should look like a regular tabbing nav, but when it were larger, then there needed to be a way to move through the list.

The script turned out nicely, and I could see the potential for yet another jQuery plugin. So, 24hrs later, here’s my effort. Basically you just need to build a list and call the plugin on it. you can define your previous and next elements if you wish (they will be dynamically created). When the browser resizes, then the list styles and functionality will be re-calculated. You can also define your animation speed.

In the near future I will add support for the jQuery UI effects library, which may be a bit of fun. I have hosted the code on Github if you want to grab a copy. Check out the demo page as well. Happy coding!

Share This