Time fr action – creating individual pages and adding the styles

In this example we'll start with a collection of separate pages. These are pretty much just carbon copies of each other with the numbers in the headings changed.

  1. Add the following markup to the <body> of our template file:
    <div id="outer-container"> <header> <h1>A Whole Site on a Single Page</h1> <nav class="clear-float"> <ul> <li><a class="on" href="single-page-site-1.html" title="Page 1">Page 1</a></li> <li><a href="single-page-site-2.html" title="Page 2">Page 2</a></li> <li><a href="single-page-site-3.html" title="Page 3">Page 3</a></li> <li><a href="single-page-site-4.html" title="Page 4">Page 4</a></li> <li><a href="single-page-site-5.html" title="Page 5">Page 5</a></li> </ul> ...

Get jQuery 1.4 Animation Techniques Beginner's Guide now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.