If you are a new developer, using AJAX XMLHttpRequest() may not be the best choice due to the variations in how each browser implements it. Instead, I recommend utilizing jQuery's AJAX Framework with functions like $.ajax() or $.get(). In your situation, .load() could also be a good alternative to $.get().
Although you didn't provide your code (you should next time!), here is a simple example:
HTML:
<ul class="menu">
<li><a href="home.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Services</a></li>
</ul>
<div id="contents">
<!-- Place the loaded contents here -->
</div>
CSS:
body {overflow-x:hidden;}
.loaded_content_wrapper {
overflow:hidden;
margin-left:100%;
width:100%;
position:absolute;
}
JS:
function loadContent(href){
/* Create the content wrapper and append it to div#contents
then load the contents to the wrapper
*/
$wrapper = $('<div>');
$wrapper.addClass('loaded_content_wrapper').appendTo('#contents').load(href, function(){
/* When the content is completely loaded
animate the new content from right to left
also the previous content slide to left and remove afterwards.
*/
$(this).animate({marginLeft:0}, 'slow').prev().animate({marginLeft:'-100%'}, 'slow', function(){
$(this).remove(); //remove previous content once the animation is complete
});
})
}
$('a').click(function(e){
e.preventDefault();
var href = $(this).attr('href');
loadContent(href)
})