How to create a horizontal navigation website using JQuery.
Horizontal based navigation websites are the ones in which the user has to scroll horizontally rather than scrolling vertically to see the contents. Basically the website flow is organized in a horizontal fashion. In this blog post, I am sharing a JQuery script to create a horizontal layout website with some interesting JQuery effects.
Steps to create the horizontal layout in the above demo page:
- Create a HTML Span element with a class ‘page‘ and put one page contents inside this span element. Create as many ‘page’ span elements as you want.
- Define a CSS style for this ‘page‘ class and set it’s position property to Absolute. Because, we will be setting each ‘page’ elements position using JQuery.
- When the page loads, get the number of ‘page‘ elements in the web page and then calculates the position for each page element. Then set the Left property of each ‘page‘ element to the calculated value.
- Define two JQuery functions to handle Next and Previous link clicks. When the ‘Next’ is clicked, then move all the ‘page’ elements to left using JQuery. To spice up the navigation, we could add some JQuery effects when the page transitions. Likewise, we have to code for ‘Previous’ link also.
Below is the source code for each of the above point.
1. Defining a ‘page’ element in HTML page
<span class="page">
<h3>First Page Title here</h3>
<p>Here goes the content for this first page element.</p>
</span>
<span class="page">
<h3>Second Page Title here</h3>
<p>Here goes the content for this second page element.</p>
</span>
<!– Add as many page elements as you want here –>
</div>
2. CSS style definition for page element:
{
width:75%;
height:60%;
background-color:#2d2d2d;
border:2px solid #5d5d5d;
position:absolute;
color:#B5B5B5;
padding:10px;
overflow:auto;
}
3. JQuery script to position all ‘page’ elements when the page loads:
var $SPACER = 40;
var $NOTACTIVEOPACITY = .5;
//Get the number of page elements in current web page
var $numberOfPages = $(".page").size();
var $pageLeftDistance = "100";
var $currentPage = $(".page:first");
//Set Current page as active
$currentPage.addClass("activePage");
for(var i=1; i<=$numberOfPages; i++)
{
$currentPage.css("left",$pageLeftDistance+"px");
//Calculate the left distance for the next page
$pageLeftDistance = parseInt($currentPage.css("left"))
+ parseInt($currentPage.css("width"))+ $SPACER;
$currentPage = $currentPage.next(".page");
$currentPage.addClass("notActivePage");
}
4. JQuery script to handle ‘Previous’ page clicks:
if($(".activePage").prev().size() == 0)
{
$("#MessagePanel").html("Sorry! You can not go to previous" +
" page, as this is the first page! Click here to close this message.");
$("#MessagePanel").slideDown("medium");
return;
}
//This function will take care of moving to previous pages
var $currPage,$tmpLeft, $allPages;
var $numberOfPages = $(".page").size();
$allPages = $(".page");
for(var $i=0; $i<$numberOfPages;$i++)
{
if($i==0)
{
$tmpLeft = parseInt($(".page:last").css("left"));
$(".page:last").animate({
left: ($tmpLeft +
parseInt($(".page:first").css("width"))
+ $SPACER)+"px",
opacity:$NOTACTIVEOPACITY
},500);
$currPage = $(".page:last");
}else
{
$currPage = $currPage.prev(".page");
$currPage.animate({
left: $tmpLeft + "px",
opacity:$NOTACTIVEOPACITY
},500);
$tmpLeft = $tmpLeft -
parseInt($currPage.css("width")) - $SPACER;
}
}
$currPage = $(".activePage");
$currPage.removeClass("activePage");
$currPage.addClass("notActivePage");
$currPage.prev(".page").removeClass("notActivePage");
$currPage.prev(".page").addClass("activePage");
$(".activePage").animate({
opacity:1
},200);
});
5. JQuery script to handle ‘Next’ page clicks:
if($(".activePage").next().size() == 0)
{
$("#MessagePanel").html("Sorry! You can not go to next page, as this" +
" is the last page! Click here to close this message.");
$("#MessagePanel").slideDown("medium");
return;
}
//This function will take care of moving to next pages
var $currPage,$tmpLeft, $allPages;
var $numberOfPages = $(".page").size();
$allPages = $(".page");
for(var $i=0; $i<$numberOfPages;$i++)
{
if($i==0)
{
$tmpLeft = parseInt($(".page:first").css("left"));
$(".page:first").animate({
left: ($tmpLeft- parseInt($(".page:first").css("width")) -
$SPACER)+"px",
opacity:$NOTACTIVEOPACITY
},500);
$currPage = $(".page:first");
}else
{
$currPage = $currPage.next(".page");
$currPage.animate({
left: $tmpLeft + "px",
opacity:$NOTACTIVEOPACITY
},500);
$tmpLeft = $tmpLeft + parseInt($currPage.css("width")) +
$SPACER;
}
}
$currPage = $(".activePage");
$currPage.removeClass("activePage");
$currPage.addClass("notActivePage");
$currPage.next(".page").removeClass("notActivePage");
$currPage.next(".page").addClass("activePage");
$(".activePage").animate({
opacity:1
},200);
});
Note: All the above JQuery functions should be written inside “$(document).ready(function(){}” block. You can download the entire source code from http://www.veerasundar.com/sbox/hnav/
Currently I am working on to improve this script and to include more navigational options like menu based navigation. I will update the source code soon once it is done.
If you enjoyed this post, please consider to leave a comment or subscribe to the feed and get future articles delivered to your feed reader.
Comments
You should add an “onresize” event. Because if you don’t and the browser window is smaller than the screen and you change the width of the browser afterwards, the content boxes overlap.
@Ronald
I agree. There are more room of improvement for this script and I am currently working on that. As you said, this kinda navigation is best suited for websites which have to get input from user in more than one page. Also for photo slide shows a horizontal navigation works well, I feel. Thanks for your comment.
@Begs
Thanks for the suggestion. Will fix it.
Hi! Thanks for the jquery. It’s really awesome, however, may I know why is it if I placed my content at lower hemisphere under the middle of the screen, and needed to scroll down to reach the content, the page will automatically tilted up to top of the page after I pressed Next Page, how can I fix the view at the context without tilting up to the top page when the effect is going on?
Best regards,
chSeng
Hey mate, great script. Was wondering if it’s possible to jump to a specific page? I.e from 1 to 4, jsut scrolls right thru 2,3 and ‘lands’ on page 4?
Otherwise keep up the good work.
It looks nice, but it is also easy to screw up. Try double clicking on the ‘next’ link. It will instatiate 2 right moves, but the second one interrupt the first one, and you get the half of 2 pages, and it will say like that. Perhaps you should fix that. Other than that, I think it has lots of potential for (large) forms, dividing it into steps with easy navigation between pages.