I suggest that you change your html so that your "pages" have ids that actually correspond to the href of the associated menu items:
<a href="#home">Home</a>
...
<div id="home" class="pages"><p>1 Whole bunch of text 1</p></div>
Then you can implement your slide animation paging thing something like this:
$(document).ready(function() {
$("#navigationMenu a").click(function(e) {
e.preventDefault();
var item = this.href.split("#")[1];
$("#content").slideUp(function() {
$(this).empty()
.append($("#" + item).clone().show())
.slideDown();
});
});
});
Note that there is no need to use .load()
because you have all of the content already on the page. You can just empty the container and then append a clone of the relevant content.
Demo: http://jsfiddle.net/FtS8u/1/
Or in my opinion a neater option would be to move all of the content into the #content
div to start with, show the #home
"page" by default, and then just hide and show the pages in place:
$(document).ready(function () {
$("#navigationMenu a").click(function (e) {
e.preventDefault();
var item = this.href.split("#")[1];
$(".pages:visible").slideUp(function () {
$("#" + item).slideDown();
});
});
$("#home").show();
});
Demo: http://jsfiddle.net/FtS8u/2/
And a last thing to consider: if you remove the .pages { display : none; }
CSS and instead use jQuery to hide the pages by adding this to the start of your document ready:
$(".pages").hide();
Then you'll still get the same effect: http://jsfiddle.net/FtS8u/7/ - except that if the user happens to have JavaScript disabled the page will still work because then the default anchor navigation will jump down to the associated div: http://jsfiddle.net/FtS8u/8/