How to Build a Sliding One Page Portfolio with jQuery

In this tutorial, I will show you how to create an interesting sliding one page portfolio with jQuery. One page sites are usually a great way to show your prospective clients how good you are at what you do. This one is no exception.

The HTML

We’ll start off with some simple HTML.

<div id="main">

<section id="box1" class="box">

</section>
<section id="box2" class="box">

</section>
<section id="box3" class="box">

</section>
<section id="box4" class="box">

</section>
<section id="box5" class="box">

</section>
<section id="box6" class="box">

</section>
<section id="box7" class="box">

</section>
<section id="box8" class="box">

</section>
<section id="box9" class="box">

</section>

</div>

Each section represents a part of all the colored squares. Each one has a different ID so that we can style the different background colors.

Next, we add the navbar to each section:

<div id="main">

<section id="box1" class="box">
<nav>
<ul>
<li id="link1"><a href="#">Home</a></li>
<li id="link2"><a href="#">Contact</a></li>
<li id="link3"><a href="#">About</a></li>
<li id="link4"><a href="#">Services</a></li>
<li id="link5"><a href="#">Why hire me?</a></li>
<li id="link6"><a href="#">Awards</a></li>
<li id="link7"><a href="#">Portfolio</a></li>
<li id="link8"><a href="#">Clients</a></li>
<li id="link9"><a href="#">Resume</a></li>
</ul>
</nav>

</section>
<section id="box2" class="box">
<nav>
<ul>
<li id="link1"><a href="#">Home</a></li>
<li id="link2"><a href="#">Contact</a></li>
<li id="link3"><a href="#">About</a></li>
<li id="link4"><a href="#">Services</a></li>
<li id="link5"><a href="#">Why hire me?</a></li>
<li id="link6"><a href="#">Awards</a></li>
<li id="link7"><a href="#">Portfolio</a></li>
<li id="link8"><a href="#">Clients</a></li>
<li id="link9"><a href="#">Resume</a></li>
</ul>
</nav>

</section>
<section id="box3" class="box">
<nav>
<ul>
<li id="link1"><a href="#">Home</a></li>
<li id="link2"><a href="#">Contact</a></li>
<li id="link3"><a href="#">About</a></li>
<li id="link4"><a href="#">Services</a></li>
<li id="link5"><a href="#">Why hire me?</a></li>
<li id="link6"><a href="#">Awards</a></li>
<li id="link7"><a href="#">Portfolio</a></li>
<li id="link8"><a href="#">Clients</a></li>
<li id="link9"><a href="#">Resume</a></li>
</ul>
</nav>

</section>
<section id="box4" class="box">
<nav>
<ul>
<li id="link1"><a href="#">Home</a></li>
<li id="link2"><a href="#">Contact</a></li>
<li id="link3"><a href="#">About</a></li>
<li id="link4"><a href="#">Services</a></li>
<li id="link5"><a href="#">Why hire me?</a></li>
<li id="link6"><a href="#">Awards</a></li>
<li id="link7"><a href="#">Portfolio</a></li>
<li id="link8"><a href="#">Clients</a></li>
<li id="link9"><a href="#">Resume</a></li>
</ul>
</nav>

</section>
<section id="box5" class="box">
<nav>
<ul>
<li id="link1"><a href="#">Home</a></li>
<li id="link2"><a href="#">Contact</a></li>
<li id="link3"><a href="#">About</a></li>
<li id="link4"><a href="#">Services</a></li>
<li id="link5"><a href="#">Why hire me?</a></li>
<li id="link6"><a href="#">Awards</a></li>
<li id="link7"><a href="#">Portfolio</a></li>
<li id="link8"><a href="#">Clients</a></li>
<li id="link9"><a href="#">Resume</a></li>
</ul>
</nav>

</section>
<section id="box6" class="box">
<nav>
<ul>
<li id="link1"><a href="#">Home</a></li>
<li id="link2"><a href="#">Contact</a></li>
<li id="link3"><a href="#">About</a></li>
<li id="link4"><a href="#">Services</a></li>
<li id="link5"><a href="#">Why hire me?</a></li>
<li id="link6"><a href="#">Awards</a></li>
<li id="link7"><a href="#">Portfolio</a></li>
<li id="link8"><a href="#">Clients</a></li>
<li id="link9"><a href="#">Resume</a></li>
</ul>
</nav>

</section>
<section id="box7" class="box">
<nav>
<ul>
<li id="link1"><a href="#">Home</a></li>
<li id="link2"><a href="#">Contact</a></li>
<li id="link3"><a href="#">About</a></li>
<li id="link4"><a href="#">Services</a></li>
<li id="link5"><a href="#">Why hire me?</a></li>
<li id="link6"><a href="#">Awards</a></li>
<li id="link7"><a href="#">Portfolio</a></li>
<li id="link8"><a href="#">Clients</a></li>
<li id="link9"><a href="#">Resume</a></li>
</ul>
</nav>

</section>
<section id="box8" class="box">
<nav>
<ul>
<li id="link1"><a href="#">Home</a></li>
<li id="link2"><a href="#">Contact</a></li>
<li id="link3"><a href="#">About</a></li>
<li id="link4"><a href="#">Services</a></li>
<li id="link5"><a href="#">Why hire me?</a></li>
<li id="link6"><a href="#">Awards</a></li>
<li id="link7"><a href="#">Portfolio</a></li>
<li id="link8"><a href="#">Clients</a></li>
<li id="link9"><a href="#">Resume</a></li>
</ul>
</nav>

</section>
<section id="box9" class="box">
<nav>
<ul>
<li id="link1"><a href="#">Home</a></li>
<li id="link2"><a href="#">Contact</a></li>
<li id="link3"><a href="#">About</a></li>
<li id="link4"><a href="#">Services</a></li>
<li id="link5"><a href="#">Why hire me?</a></li>
<li id="link6"><a href="#">Awards</a></li>
<li id="link7"><a href="#">Portfolio</a></li>
<li id="link8"><a href="#">Clients</a></li>
<li id="link9"><a href="#">Resume</a></li>
</ul>
</nav>

</section>


</div>

Once we have that, we can add some sample content to each section.

<div id="main">

<section id="box1" class="box">
<nav>
<ul>
<li id="link1"><a href="#">Home</a></li>
<li id="link2"><a href="#">Contact</a></li>
<li id="link3"><a href="#">About</a></li>
<li id="link4"><a href="#">Services</a></li>
<li id="link5"><a href="#">Why hire me?</a></li>
<li id="link6"><a href="#">Awards</a></li>
<li id="link7"><a href="#">Portfolio</a></li>
<li id="link8"><a href="#">Clients</a></li>
<li id="link9"><a href="#">Resume</a></li>
</ul>
</nav>


	<h2>John Smith</h2>
	<h3>
	Welcome to the portfolio of the great John Smith!
	</h3>
</section>
<section id="box2" class="box">
<nav>
<ul>
<li id="link1"><a href="#">Home</a></li>
<li id="link2"><a href="#">Contact</a></li>
<li id="link3"><a href="#">About</a></li>
<li id="link4"><a href="#">Services</a></li>
<li id="link5"><a href="#">Why hire me?</a></li>
<li id="link6"><a href="#">Awards</a></li>
<li id="link7"><a href="#">Portfolio</a></li>
<li id="link8"><a href="#">Clients</a></li>
<li id="link9"><a href="#">Resume</a></li>
</ul>
</nav>


<h3>Contact Me</h3>
<p>
<ul class="contentul">
<li>Phone number: (123) 456 7890</li>
<li>Fax: (123) 456 7890</li>
<li>Email: johnsmith@johnsmith.com</li>
</ul>
</p>


</section>
<section id="box3" class="box">
<nav>
<ul>
<li id="link1"><a href="#">Home</a></li>
<li id="link2"><a href="#">Contact</a></li>
<li id="link3"><a href="#">About</a></li>
<li id="link4"><a href="#">Services</a></li>
<li id="link5"><a href="#">Why hire me?</a></li>
<li id="link6"><a href="#">Awards</a></li>
<li id="link7"><a href="#">Portfolio</a></li>
<li id="link8"><a href="#">Clients</a></li>
<li id="link9"><a href="#">Resume</a></li>
</ul>
</nav>

<h2>About</h2>
<p>
Odio, arcu non nisi? Elementum habitasse vel sed, dignissim ultrices sagittis? Ac dictumst, integer nunc non quis purus rhoncus in. Cras lundium scelerisque et pid! Ut proin, porttitor augue in integer nec aliquam sagittis elit, phasellus sit! Pellentesque habitasse sagittis massa adipiscing elementum sed, eu, scelerisque. Augue magna, risus mus, in. Aenean parturient sed, lacus, etiam. Turpis? Enim pid amet elementum, ac nunc, scelerisque turpis. Ultrices! Cum aliquam? Magna. Odio? Tincidunt mauris integer lacus phasellus, ac, vel dis porttitor pulvinar. Eros lundium rhoncus dapibus? Auctor sed integer placerat? Ac sed. Velit porttitor. Cursus lectus magna penatibus lorem habitasse penatibus scelerisque! Ultricies auctor et nunc, tempor dolor porttitor rhoncus! Odio in platea dis rhoncus eu penatibus ut et eu sagittis purus.
</p>

</section>
<section id="box4" class="box">
<nav>
<ul>
<li id="link1"><a href="#">Home</a></li>
<li id="link2"><a href="#">Contact</a></li>
<li id="link3"><a href="#">About</a></li>
<li id="link4"><a href="#">Services</a></li>
<li id="link5"><a href="#">Why hire me?</a></li>
<li id="link6"><a href="#">Awards</a></li>
<li id="link7"><a href="#">Portfolio</a></li>
<li id="link8"><a href="#">Clients</a></li>
<li id="link9"><a href="#">Resume</a></li>
</ul>
</nav>

<h2>Services</h2>
<p>
Odio, arcu non nisi? Elementum habitasse vel sed, dignissim ultrices sagittis? Ac dictumst, integer nunc non quis purus rhoncus in. Cras lundium scelerisque et pid! Ut proin, porttitor augue in integer nec aliquam sagittis elit, phasellus sit! Pellentesque habitasse sagittis massa adipiscing elementum sed, eu, scelerisque. Augue magna, risus mus, in. Aenean parturient sed, lacus, etiam. Turpis? Enim pid amet elementum, ac nunc, scelerisque turpis. Ultrices! Cum aliquam? Magna. Odio? Tincidunt mauris integer lacus phasellus, ac, vel dis porttitor pulvinar. Eros lundium rhoncus dapibus? Auctor sed integer placerat? Ac sed. Velit porttitor. Cursus lectus magna penatibus lorem habitasse penatibus scelerisque! Ultricies auctor et nunc, tempor dolor porttitor rhoncus! Odio in platea dis rhoncus eu penatibus ut et eu sagittis purus.
</p>

</section>
<section id="box5" class="box">
<nav>
<ul>
<li id="link1"><a href="#">Home</a></li>
<li id="link2"><a href="#">Contact</a></li>
<li id="link3"><a href="#">About</a></li>
<li id="link4"><a href="#">Services</a></li>
<li id="link5"><a href="#">Why hire me?</a></li>
<li id="link6"><a href="#">Awards</a></li>
<li id="link7"><a href="#">Portfolio</a></li>
<li id="link8"><a href="#">Clients</a></li>
<li id="link9"><a href="#">Resume</a></li>
</ul>
</nav>

<h2>Why hire me?</h2>
<p>
Odio, arcu non nisi? Elementum habitasse vel sed, dignissim ultrices sagittis? Ac dictumst, integer nunc non quis purus rhoncus in. Cras lundium scelerisque et pid! Ut proin, porttitor augue in integer nec aliquam sagittis elit, phasellus sit! Pellentesque habitasse sagittis massa adipiscing elementum sed, eu, scelerisque. Augue magna, risus mus, in. Aenean parturient sed, lacus, etiam. Turpis? Enim pid amet elementum, ac nunc, scelerisque turpis. Ultrices! Cum aliquam? Magna. Odio? Tincidunt mauris integer lacus phasellus, ac, vel dis porttitor pulvinar. Eros lundium rhoncus dapibus? Auctor sed integer placerat? Ac sed. Velit porttitor. Cursus lectus magna penatibus lorem habitasse penatibus scelerisque! Ultricies auctor et nunc, tempor dolor porttitor rhoncus! Odio in platea dis rhoncus eu penatibus ut et eu sagittis purus.
</p>

</section>
<section id="box6" class="box">
<nav>
<ul>
<li id="link1"><a href="#">Home</a></li>
<li id="link2"><a href="#">Contact</a></li>
<li id="link3"><a href="#">About</a></li>
<li id="link4"><a href="#">Services</a></li>
<li id="link5"><a href="#">Why hire me?</a></li>
<li id="link6"><a href="#">Awards</a></li>
<li id="link7"><a href="#">Portfolio</a></li>
<li id="link8"><a href="#">Clients</a></li>
<li id="link9"><a href="#">Resume</a></li>
</ul>
</nav>

<h2>Awards</h2>
<p>
Odio, arcu non nisi? Elementum habitasse vel sed, dignissim ultrices sagittis? Ac dictumst, integer nunc non quis purus rhoncus in. Cras lundium scelerisque et pid! Ut proin, porttitor augue in integer nec aliquam sagittis elit, phasellus sit! Pellentesque habitasse sagittis massa adipiscing elementum sed, eu, scelerisque. Augue magna, risus mus, in. Aenean parturient sed, lacus, etiam. Turpis? Enim pid amet elementum, ac nunc, scelerisque turpis. Ultrices! Cum aliquam? Magna. Odio? Tincidunt mauris integer lacus phasellus, ac, vel dis porttitor pulvinar. Eros lundium rhoncus dapibus? Auctor sed integer placerat? Ac sed. Velit porttitor. Cursus lectus magna penatibus lorem habitasse penatibus scelerisque! Ultricies auctor et nunc, tempor dolor porttitor rhoncus! Odio in platea dis rhoncus eu penatibus ut et eu sagittis purus.
</p>

</section>
<section id="box7" class="box">
<nav>
<ul>
<li id="link1"><a href="#">Home</a></li>
<li id="link2"><a href="#">Contact</a></li>
<li id="link3"><a href="#">About</a></li>
<li id="link4"><a href="#">Services</a></li>
<li id="link5"><a href="#">Why hire me?</a></li>
<li id="link6"><a href="#">Awards</a></li>
<li id="link7"><a href="#">Portfolio</a></li>
<li id="link8"><a href="#">Clients</a></li>
<li id="link9"><a href="#">Resume</a></li>
</ul>
</nav>

<h2>Portfolio</h2>
<p>
Odio, arcu non nisi? Elementum habitasse vel sed, dignissim ultrices sagittis? Ac dictumst, integer nunc non quis purus rhoncus in. Cras lundium scelerisque et pid! Ut proin, porttitor augue in integer nec aliquam sagittis elit, phasellus sit! Pellentesque habitasse sagittis massa adipiscing elementum sed, eu, scelerisque. Augue magna, risus mus, in. Aenean parturient sed, lacus, etiam. Turpis? Enim pid amet elementum, ac nunc, scelerisque turpis. Ultrices! Cum aliquam? Magna. Odio? Tincidunt mauris integer lacus phasellus, ac, vel dis porttitor pulvinar. Eros lundium rhoncus dapibus? Auctor sed integer placerat? Ac sed. Velit porttitor. Cursus lectus magna penatibus lorem habitasse penatibus scelerisque! Ultricies auctor et nunc, tempor dolor porttitor rhoncus! Odio in platea dis rhoncus eu penatibus ut et eu sagittis purus.
</p>

</section>
<section id="box8" class="box">
<nav>
<ul>
<li id="link1"><a href="#">Home</a></li>
<li id="link2"><a href="#">Contact</a></li>
<li id="link3"><a href="#">About</a></li>
<li id="link4"><a href="#">Services</a></li>
<li id="link5"><a href="#">Why hire me?</a></li>
<li id="link6"><a href="#">Awards</a></li>
<li id="link7"><a href="#">Portfolio</a></li>
<li id="link8"><a href="#">Clients</a></li>
<li id="link9"><a href="#">Resume</a></li>
</ul>
</nav>

<h2>Clients</h2>
<p>
Odio, arcu non nisi? Elementum habitasse vel sed, dignissim ultrices sagittis? Ac dictumst, integer nunc non quis purus rhoncus in. Cras lundium scelerisque et pid! Ut proin, porttitor augue in integer nec aliquam sagittis elit, phasellus sit! Pellentesque habitasse sagittis massa adipiscing elementum sed, eu, scelerisque. Augue magna, risus mus, in. Aenean parturient sed, lacus, etiam. Turpis? Enim pid amet elementum, ac nunc, scelerisque turpis. Ultrices! Cum aliquam? Magna. Odio? Tincidunt mauris integer lacus phasellus, ac, vel dis porttitor pulvinar. Eros lundium rhoncus dapibus? Auctor sed integer placerat? Ac sed. Velit porttitor. Cursus lectus magna penatibus lorem habitasse penatibus scelerisque! Ultricies auctor et nunc, tempor dolor porttitor rhoncus! Odio in platea dis rhoncus eu penatibus ut et eu sagittis purus.
</p>

</section>
<section id="box9" class="box">
<nav>
<ul>
<li id="link1"><a href="#">Home</a></li>
<li id="link2"><a href="#">Contact</a></li>
<li id="link3"><a href="#">About</a></li>
<li id="link4"><a href="#">Services</a></li>
<li id="link5"><a href="#">Why hire me?</a></li>
<li id="link6"><a href="#">Awards</a></li>
<li id="link7"><a href="#">Portfolio</a></li>
<li id="link8"><a href="#">Clients</a></li>
<li id="link9"><a href="#">Resume</a></li>
</ul>
</nav>

<h2>Resume</h2>
<p>
Odio, arcu non nisi? Elementum habitasse vel sed, dignissim ultrices sagittis? Ac dictumst, integer nunc non quis purus rhoncus in. Cras lundium scelerisque et pid! Ut proin, porttitor augue in integer nec aliquam sagittis elit, phasellus sit! Pellentesque habitasse sagittis massa adipiscing elementum sed, eu, scelerisque. Augue magna, risus mus, in. Aenean parturient sed, lacus, etiam. Turpis? Enim pid amet elementum, ac nunc, scelerisque turpis. Ultrices! Cum aliquam? Magna. Odio? Tincidunt mauris integer lacus phasellus, ac, vel dis porttitor pulvinar. Eros lundium rhoncus dapibus? Auctor sed integer placerat? Ac sed. Velit porttitor. Cursus lectus magna penatibus lorem habitasse penatibus scelerisque! Ultricies auctor et nunc, tempor dolor porttitor rhoncus! Odio in platea dis rhoncus eu penatibus ut et eu sagittis purus.
</p>

</section>

</div>

Wonderful! Now that we have our HTML base, we can move on to the CSS that will make it all look good.

The CSS

We’ll start off with some generic styling.

body {
font-family: arial;
font-size: 15px;
overflow: hidden;
}

h2 {
color: #ffffff;
text-align: center;
font-family: Verdana;
font-size: 54px;
margin-top: 50px;
}

h3 {
color: #ffffff;
text-align: center;
font-family: Verdana;
font-size: 16px;
margin-top: 20px;
}

p {
color: #ffffff;
text-align: center;
font-family: arial;
font-size: 16px;
line-height: 24px;
margin-top: 20px;
}

.contentul {
text-align: center;
font-size: 16px;
line-height: 24px;
color: #ffffff;
}

Just some simple text styling. The “.contentul” styling is for any unordered lists inside the sections that aren’t the navigation.

Next up, we’ll style the navbar.

nav {
height: 50px;
width: 100%;
}

nav ul li {
height: 50px;
width: 11.1%;
text-align: center;
float: left;
}

nav ul li a {
text-decoration: none;
color: #ffffff;
line-height: 50px;
display: block;
}

#link1 {
background: #fe4632;
}

#link2 {
background: #005fe5;
}

#link3 {
background: #ffb40a;
}

#link4 {
background: #80bf34;
}

#link5 {
background: #26bfa3;
}

#link6 {
background: #2d93cf;
}

#link7 {
background: #ab250f;
}

#link8 {
background: #e99702;
}

#link9 {
background: #9adf56;
}

Once again, very simple. There’s a “nav” element in each section, which contains an unordered list full of the links. Each link takes up 11.1% of the nav, so that it ends up stretching to almost the end of the section the user is currently on. Each link has a different background color that corresponds to the section that the link points to.

Now, the sections.

.box {
float: left;
}

#box1 {
background: #fe4632;
}

#box2 {
background: #005fe5;
}

#box3 {
background: #ffb40a;
}

#box4 {
background: #80bf34;
}

#box5 {
background: #26bfa3;
}

#box6 {
background: #2d93cf;
}

#box7 {
background: #ab250f;
}

#box8 {
background: #e99702;
}

#box9 {
background: #9adf56;
}

Each box is floated to the left so that they end up being right next to each other horizontally as well as vertically. Each one also has a different background color.

That’s it for the CSS. Next up is the jQuery that will power the whole thing.

The jQuery

Before we dive into the code, I’ll explain how it will work. When the document is loaded, a “resizeBoxes” function will run, which resizes the boxes to be the same size as the user’s viewport. The same function will run whenever the window is resized. When a link is clicked, the margin-top and the margin-left of the “main” div will be animated so that the user will end up seeing the section that we want them to see. We’ll have a neat “goTo” function to power that.

This is the base template, which we’ll fill with some code in a moment.

$(document).ready(function(){
		
function resizeBoxes() {

}
		
resizeBoxes();
		
$(window).resize(function() {
	resizeBoxes();
});


$('nav ul li a').click(function(){
	return false;
});

function goTo(horizontal,vertical) {
	
}
		
});

Now that we’ve got the skeleton, we can start writing the actual functions.

function resizeBoxes() {

var browserWidth = $(window).width();
var browserHeight = $(window).height();
		
$('#main').css({
	width: browserWidth*3,
});
		
		
$('.box').css({
	width: browserWidth,
	height: browserHeight,
});

}

resizeBoxes();
		
$(window).resize(function() {
	resizeBoxes();
});


$('nav ul li a').click(function(){
	return false;
});

In this function, “main” is resized to just barely fit each box so that there is a grid of 3 by 3, and each box resizes to the dimensions of the viewport. Then, we execute the function. There’s also a browser resize handler, which recalculates the dimensions of each box whenever the user’s browser is resized. Lastly, there’s a return false for each nav link so that the browser doesn’t actually follow each link.

Up next, we have the “goTo” function.

function goTo(horizontal,vertical) {

	var browserWidth = $(window).width();
	var browserHeight = $(window).height();

	$('#main').animate({
		marginLeft: '-'+browserWidth*horizontal,
		marginTop: '-'+browserHeight*vertical,
	}, 1000);
	
}

The function gets the viewport dimensions and and writes them to 2 variables. Then, it animates the margins of the “main” element so that the user ends up seeing the section we want them to see.

Lastly, we’ve got to add click function for each nav link.

$('#link1 a').click(function(){
	goTo(0,0);
});


$('#link2 a').click(function(){
	goTo(1,0);
});

$('#link3 a').click(function(){
	goTo(2,0);
});

$('#link4 a').click(function(){
	goTo(0,1);
});

$('#link5 a').click(function(){
	goTo(1,1);
});

$('#link6 a').click(function(){
	goTo(2,1);
});

$('#link7 a').click(function(){
	goTo(0,2);
});

$('#link8 a').click(function(){
	goTo(1,2);
});

$('#link9 a').click(function(){
	goTo(2,2);
});

Because we have the “goTo” function, we’re saving ourselves the headache of calculating each click function seperately. We’re also reducing the amount of code necessary. Wonderful!

Well, that’s it for this tutorial. If you have any questions or comments, the comment form is below.

(8 Posts)

Alexandre Smirnov is a web developer and designer who lives and works in California. He enjoys creating cool new stuff out of CSS3 and HTML5, and is convinced that Jquery is the meaning of life. He also regularly writes on his blog, DesignLunatic.com.

Comments

  • Amazing one 
    i most like the sliding of the pages +1

  • Great tutorial, I really like the simplicity of this, the simplicity of this makes you want to use this and add your own CSS styles. I love the fact that this is J query which means that this can be viewed on apple mobile devices.

  • dwiekropki

    Nice, but better option will be making it to work with #hash and setting proper box on load if the # is not empty :)

  • Enrique Ramírez

    This could probably be easier using offset to automatically calculate the desired section position, getting it’s left/top values and animating accordingly. Would save a lot of $(‘a’).click(function() {…}); !

    Other than that, nice tutorial. :)

  • Its a really nice idea, but a bit hard on the eyes, if you click one after the other. It can be quite nauseating. lol

    I am sure it can be adapted, nice concept. 

  • Zhanzhao86

    amazing effect!!!

  • hi nice idea, i think it would be better if the navigation using fixed position

  • Nice tutorial , liked it and I was search about this options by JQuery …. thanks :)

  • AM

    very nice…thank-you! 

  • Nice idea.. but the cons is it is not good on eyes …. is it only for me ??

  • Laura

    Nice but the positioning goes to crap when you re-size the window.

  • Really like the jquery effect in this but the HTML needs some work.

  • Life saving tutorial..

  • Definitely something I want to mess around with now. Instead of doing the navigation multiple times, could you just fix the navigation to the top? Not sure how it would look with the effect, but may be an option.

  • Brent Traut

    Check your Javascript. If you go to any tab that doesn’t reside on the left side of the page and then resize your browser window, the whole layout breaks.

  • Fb

    Try to resize the window, and enjoy your script

  • Great article, I will be trying this on my own personal website.
    Thanks a lot.

  • awesome…thank u master ♥

  • athome

    repeating the navigation?!?!? Page Load? you have jQuery for frick sake, use it!

  • Great concept! looks great in FF; try it in IE 8 though?

  • Sweet Prash

    WOW jusrt love it superb man Hats off!!:)

  • Bigsho4life

    Not a bad one. really helpful

  • shatto

    it’s fantastic, i found it a lot of time!!! thank you!!! :)

  • renzovargas

    gran aporte amigo, justo lo que buscaba para un proyecto personal, espero sigas colgando tutoriales asi, saludos desde Perú

  • Harsha

    but not working in IE8.

  • Dinesh

    too good 

  • on re-size positioning goes to crap 

  • can u just explain how the GoTo function works and does!!! nd if i want to add a new menu item how to set GoTo for it!!!!!!!!!!!!!!

  • Chuck

    Just getting started here.  How would this code look in your standard, plain Jane, run of the mill http code?

  • Andrew Molo

    The jQuery folder, i can’t find it in the source files

  • Terfa Prince Binda

    …i think u cud ask him to refine the jquery so that the layout resizes well along with the browser window… the sexing up the HTML is entirely up to you…!

  • nice, responsive and amazing effect !!