jQuery makes it ridiculously easy for anyone to add AJAX functionality to your website, my example loads the navigation from my site.

The secret to this is the load() function. It allows you to load portions, defined with CSS selectors, of any remote location. Top off this function with a smooth animation, and enjoy. Here is the code I used:

jQuery(document).ready(function(){

    $('#loadlink').click(function(){

        $(this).text('loading...');
        $('#container')
            .append('<div id="content"></div>')
            .children('#content')
            .hide()
            .load('http://www.chrismaynard.net/header.php #header #navcontainer a',
            function() {
                // This is the callback function
                $('#loadlink').hide();
                $('#content').slideDown();
            });
        return false;

    });

});

• BROWSE / IN TIMELINE
• « Installing Tomcat on a MediaTemple (DV) dedicated server
• » Sky Foundation Mock-up

• BROWSE / IN AJAX code jQuery
• « Installing Tomcat on a MediaTemple (DV) dedicated server
• » Yahoo! style vertical navigation