CODEWITHSUNDEEP
jquery
NullVoxPopuli
NullVoxPopuli

Reputation: 65183

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

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?

Upvotes: 1

Views: 4942

Answers (2)

Nithesh Chandra
Nithesh Chandra

Reputation: 1860

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.

Upvotes: 1

Yan Ivanov
Yan Ivanov

Reputation: 196

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.

Upvotes: 0

Related Questions