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:

1. 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.
2. 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.
3. 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.
4. 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

<div id="PageContainer">
    <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:

.page
{
	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:

//Global Constants
	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:

	$(".moveBackward").click(function(){

		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:

	$(".moveForward").click(function(){
		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.

Related Posts

• Redesigning my home page as a game
• JavaScript getAttribute method
• Infinite scroll : Loading content while scrolling, using Java and JQuery
• Timelinr – A web 2.0 application for creating timelines online
• I am a Java developer. Should I know about DIV ?