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

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.