Animations Single Paged Layout with jQuery

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>
You might also like
Tags
accordion accordion menu animation navigation animation navigation menu buttons carousel checkbox inputs css3 css3 menu css3 navigation date picker dialog drag drop drop down menu drop down navigation menu elastic navigation form gallery glide navigation horizontal navigation menu hover effect image gallery image hover image lightbox image scroller image slideshow multi-level navigation menus rating select dependent select list slide image slider menu stylish form table tabs text effect text scroller tooltips tree menu vertical navigation menu