Custom tabbed navigation with coda-slider 2.0

Believe it or not, this was kind of a pain in the butt. Just enough so that I'm going to belt out a quick blog post about it. It comes down to changing a single line of code in the end, but there are some gotchas I'll share w/you along the way.

Coda-slider 2.0 is hot

Niall Doherty has recently released version 2 of his Coda-Slider plugin, and having been inspired by Panic's product page for Coda, I planned on taking advantage of it.

Once downloaded, the lib was unzipped into a sub-directory of the site (the wedding site is hard-coded HTML); looks like this:

The author has a handful of functional demos of the plugin in action here.

This is the one I was most interested in (Example 4: Non-dynamic tabs and arrows):

Note that Niall included a minified copy of jQuery 1.3.2, his coda-slider plugin, and the jQuery-easing plugin to make our lives easier. Thanks, Niall!

You'll want to have these scripts included when you start building your slider.

Once you have your HTML set up (I'll have a full example at the end), you can start your slider by running the codaSlider() method on your slider div:

Creating a custom panel navigation

My first attempt to integrate this was flawed. I didn't use Niall's HTML (posted above). I wanted to use semantic (or at least, succinct) naming conventions for my nav & slider IDs (like #topnav, and #slider). I didn't want to use an unordered list for navigation.

I wrote something that looked more like this:

It was utterly non-functional.

Navigation & Slider IDs are Finicky

Your navigation should have an ID of coda-nav-1, and your slider wrapper should have an ID of coda-slider-1. This is not obvious, and despite my best efforts (in which I resisted changing the coda-slider plugin code), you're going to have to riddle your coda slider elements with weird structural data.

Further comparisons to his demo code led to the addition of some 'tab' classes around my nav.

This code was much more functional:

Highlighting the Current Tab

The custom nav code you see above was only mostly functional (once I figured out the right structure). In order to get the '.current' class to show up on your links, you have to change a slice of the coda-slider plugin (line 150):

...where it selects ul to something that matches your nav's structure:

You might see code that handles the .current class exists elsewhere in the plugin; you should only need to change line 150 for your custom navigation.

Wrapping up

Here's a fully-functional page that uses a custom navigation (you may need to adjust some of the coda-slider CSS that comes w/the plugin; it's well documented. Also, please double-check the script paths in the demo page before asking me for help):

Here's Niall's settings documentation. It should guide you on your way.