July 25, 2007 9 Comments

Panic Coda Navigation Tutorial

Tonight I’ll be showing you a tutorial on how the guys over at Panic Studios created their sick website navigation for their new flagship product, Coda. Now you can put this innovative effect into use on your own projects. For those of you who haven’t seen it yet, you can check it out here - Panic Coda

This tutorial may get a bit complicated for the average joe. So if you’re not in the mood for some reading, I suggest you jump to the bottom of this article and download the source. This way you get to tool around and get some hands on time.

Example

Sweet! Tell me more…

Above you’ll see a small example that I’ve created. If you haven’t clicked any of the navigation items above do so now so that you can see the effect. Basically what we have here is on large div element that contains each ’section’ within it. Only one section is shown at a time, and the other sections are hidden off to the right via overflow. Once a navigation item is clicked, a bit of javascript is executed to calculate the proper offset to ’section’ that is hidden, and then scrolls to it.

Usage

First you’re going to need to include the cfcoda.js file (this is included with the download at the bottom of this tutorial) in your document. It should look something like the following:

1	<script src="js/cfcoda.js" language="javascript"></script>

Here is where it all gets a little tricky, so follow along as best you can then download the source and you’ll probably understand a bit better. First, you’re going to need to create your navigational element. For example, if you look at the above example you’ll see that I have ‘Home’, ‘About’, ‘Scripts’, etc — this is what I mean by navigational element. To use this script, you will have to utilize the Unordered List (<ul></ul>) and the List Item (<li></li>) HTML elements. The navigation in the above example looks like this:

<ul id="toolbar" class="navigation">
   <li id="home-tab">Home</li>
   <li id="about-tab">About</li>
   <li id="scripts-tab">Scripts</li>
   <li id="downloads-tab">Downloads</li>
   <li id="faq-tab">FAQ</li>
   <li id="contact-tab">Contact</li>
</ul>

You can style these elements via CSS any way you see fit. One of the imperative things to remember is you must name your UL element “toolbar” which you can see I’ve done here. The way you name your LI elements is also important. You can name them whatever you would like, you just need to make sure to append “-tab” to the end, which you can also see I’ve done here.

Moving on, now that you’ve styled and created your navigational element, you’re going to need to create the content area. This is where your content will reside, and all the scrolling effects happen. You’re going to need to create 3 div elements, and 1 CSS class. You’re going to need to create a ‘frame’ element which is the outer most div to keep your content nice and wrapped up, a scroller element, which is where the scrolling effect actually takes place, and a content element which holds all of your content. Finally, a section class which tells the javascript how big your sections are so that the scrolling can be done properly. The CSS to my example project looks like so:

#frame {
	overflow: hidden;
	margin: 0 auto;
	width: 413px;
}
#scroller {
	width: 413px;
	margin: 0 auto;	
	overflow: hidden;
}
#content {
	width: 2490px;
}
.section {
	width: 413px;
	float: left;
}

The above CSS can be put within style tags in the header of your document, or you can link them via an external stylesheet–your choice. I’ve set the width of my frame element to 413 pixels which is how much I want to display. I’ve also set the overflow to hidden so that it hides any content that’s not within this specified area. Next, you’ll need to set the scroller element’s width to the same width as your frame, in this case 413 pixels. Next we have the content element, which is where we need to do a little math. Take the width of your frame element, and add 2 pixels, in this case that would give us 415 pixels. Count how many sections you are going to have, and multiply this by the number we just calculated. In my example I have 6 sections, so 415 * 6 will equal 2490. This number is to be the width of your content element. The reason I added two pixels to my frame width number, is to keep the browser from wrapping the sections beneath each other. Lastly, you’re going to create your section CSS class. Give it the same width as your frame and scroller elements, and set the float to left. Now, lets setup our CSS we have just defined in our document. Here is an example:

<div id="frame">
   <div id="scroller">
      <div id="content">
         <div class="section" id="home-pane">
           Content for the 'Home' page would go here.
         </div>
         <div class="section" id="about-pane">
           Content for the 'About' page would go here.
         </div>
         <div class="section" id="scripts-pane">
           Content for the 'Scripts' page would go here.
         </div>
         <div class="section" id="downloads-pane">
           Content for the 'Downloads' page would go here.
         </div>
         <div class="section" id="faq-pane">
           Content for the 'FAQ' page would go here.
         </div>
         <div class="section" id="contact-pane">
           Content for the 'Contact' page would go here.
         </div>
      </div>
   </div>
</div>

Lets go over the above HTML. First you’ve created your outer frame div followed by the scroller div, then your content div. Then you’ll notice there are 6 divs between the content div, which create your sections. You’ll give them the class name of section which is defined in our CSS document and an ID attribute. The ID attribute is probably the most important thing about the above. You need to name them the same as your List Item’s in you navigation element, and attach “-pane” to the end.

We’re almost done, thank god as I’m babbling on like a drunkard. Finally we need to revisit our navigation element, and add the proper javascript to tie all of this together. You will need to create links out of your List Item’s and add the following code to your onclick events:

1	javascript:ScrollSection('home-pane', 'scroller', 'home-pane'); return false

So in my example, my navigation element looks like the following:

<ul id="toolbar" class="navigation">
   <li id="home-tab"><a href="#" onclick="javascript:ScrollSection('home-pane', 'scroller', 'home-pane'); return false">Home</a></li>
   <li id="about-tab"><a href="#" onclick="javascript:ScrollSection('about-pane', 'scroller', 'home-pane'); return false">About</a></li>
   <li id="scripts-tab"><a href="#" onclick="javascript:ScrollSection('scripts-pane', 'scroller', 'home-pane'); return false">Scripts</a></li>
   <li id="downloads-tab"><a href="#" onclick="javascript:ScrollSection('downloads-pane', 'scroller', 'home-pane'); return false">Downloads</a></li>
   <li id="faq-tab"><a href="#" onclick="javascript:ScrollSection('faq-pane', 'scroller', 'home-pane'); return false">FAQ</a></li>
   <li id="contact-tab"><a href="#" onclick="javascript:ScrollSection('contact-pane', 'scroller', 'home-pane'); return false">Contact</a></li>
</ul>

You’re calling the ScrollSection function in the javascript file, and feeding it 3 parameters. The first parameter is telling the script which section you wish to scroll to. The second parameter is the name of the scroller div element we’ve created, in this case scroller. And lastly, the last parameter is the name of your home section (1st navigation item), in this case home-pane. Save your document and load it in your browser, and you should be good to go. You can also utilize the next and previous javascript functions, which is outlined in the source when you download the example. Enjoy your new found skills, and give praise to our boys over at Panic for such an innovative idea.