Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

Does anyone know how the navigation on this site was made?
http://www.thinkingforaliving.org

share|improve this question
    
In the future, you can research this yourself by selecting "View Source" in your browser on that page. The source code contains all of the appropriate JavaScript and code references to answer your question. That said, your actual question has nothing to do with WordPress! I personally vote to close as off-topic. –  EAMann Dec 23 '10 at 15:46
add comment

2 Answers

up vote 2 down vote accepted

That sliding navigation is a feature built-in to the theme used by the Thinking for a Living website. If you view the source code, you can see that each panel in the slider is defined by similar code starting with:

<div id="covers" scope="Covers">
    <div class="cover-index grid4 column page"> 
        <div class="cover grid3 cover-quote"> 
    ...

A quick look further through the code finds the page defining a couple of specific JavaScript files for the site (custom-built for the site means it's not a publicly available plug-in):

<!-- ORG.TFAL.JS -->
<script type="text/javascript" src="http://www.thinkingforaliving.org/wp-content/themes/TFAL/lib/js/org.tfal.plugins.js?0.1.0.9"></script> 
<script type="text/javascript" src="http://www.thinkingforaliving.org/wp-content/themes/TFAL/lib/js/org.tfal.js?0.1.0.7"></script> 

Digging deeper shows that the site is selecting the items inside scope="Covers" and loading them for use elsewhere:

/* ---------------------------------- */       
/* COVERS */    
$('div[scope=Covers]').TFALCovers();               
$('.cover-quote').TFALCoverQuote();       
/* ---------------------------------- */

The other JavaScript file defines both TFALCovers() and TFALCoverQuote() as jQuery extensions that control the look, layout, and behavior of the home page.

So to answer your question, the navigation of this page was built with some cleverly-constructed, custom jQuery extensions. You can poke around in the code yourself and try to simulate the behavior on your own site, or you can use one of any freely available jQuery slideshow/sliding navigation plug-ins:

share|improve this answer
    
EAMann, now that's an answer! Thank you so much for your help with this. –  detonate Dec 23 '10 at 19:33
add comment

Its jquery, dont think there is a plugin for it. There are a handful of them here http://vandelaydesign.com/blog/web-development/jquery-image-galleries/

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.