jQuery: how do I slide pages, but use only one nav?

Question

I found this tutorial: http://www.queness.com/post/356/create-a-vertical-horizontal-and-diagonal-sliding-content-website-with-jquery

And I like the way this site does their sliding: http://dknewmedia.com

How do I do the sliding effect like dk new media, but with only a single nav?

Answer 1

As I think, there are two ways you can achieve that: 1) you can exclude the navigation from animated area, 2) you can make two separate animations for navigation and the rest content so that your navigation simply goes off the screen and then returns from below. That's the ideas.

Answer 2

You can place your navigation element outside the wrapper element which contains the rest of the page; absolute-position the nav element and move the wrapper up and down.

HTML:

<ul id="nav">
    <li><a href="#page1">Page 1</a></li>
    <li><a href="#page2">Page 2</a></li>
    <li><a href="#page3">Page 3</a></li>
</ul>
<div id="wrapper">
    <div id="page1">Content for page 1</div>
    <div id="page2">Content for page 2</div>
    <div id="page3">Content for page 2</div>
</div>

CSS:

#nav { position: absolute; top: 0; right: 50px; z-index: 50; }
#nav > li { float: left; padding: 5px 10px; }
#wrapper { height: 500px; overflow: hidden; position: relative; z-index: 20; }
#wrapper > div { width: 100%; height: 500px; }

JS:

$(function() {
    $('#nav a').click(function() {
        pageId = $(this).attr('href');
        num = $('#nav a').index(this);
        $(pageId).parent().animate({scrollTop: (500 * num)}, 'slow');
    });
});​

​You can try it at http://jsfiddle.net/L6Q5V/. You may have to optimize the code.