This is A Single Paged Layout jQuery Plugin with UI Animations

Single page layouts are taking off in a big way. It seems as if every product page nowadays is single paged, so I thought I’d have a little spin at it with this jQuery plugin. This allows you to create single paged layouts with a few optional custom UI elements such as fold up menus. Check out the demo and enjoy!

How it Works

First off, we need to set up the HTML. FullPaged searches for divs with the id [keyword]-page. So for example, by default the home page has an ID of home-page. In the demo I’ve created 3 pages, the other two pages having the IDs demo-page and world-page.

If you navigate to, for example, index.php#demo then the demo-page will come up. Similarly navigating to index.php#world, the world page will come up. If the user clicked on a link to these pages then they will be scrolled to with a little animation.

Finally there is a div with the class hidden-content. This is where the menu goes. It’s called hidden content because it is initially hidden, and then it will enter the scene when the user clicks a button such as ‘learn more’, which is (by default) identified by the class show-menu. So our HTML looks like this:

<div id="container">

	<div id="home-page">
		<div class="slide-content">
			<div class="content">
				<p>A little information about the product or whatever. Click Learn More and select 'Demos' for more demos.</p>
			</div>
			<div class="show-menu">
				Learn More
			</div>
		</div>
	</div>
	
	<div id="demo-page">
		<div class="slide-content">
				
			<!-- Content goes here -->
				
		</div>
	</div>
	
	<div id="world-page">
		<div class="slide-content">
			<!-- Content goes here -->
		</div>
	</div>
	
	<div class="hidden-content">		
		<div class="content">
			<ul class='menu'>
				<li>
					<a href="#home">
						<span>⌂</span>
						<span>HOME</span>
					</a>
				</li>
				<li>
					<a href="#demo">
						<span></span>
						<span>DEMOS</span>
					</a>
				</li>
				<li>
					<a href="#world">
						<span>