Question

I am pretty new to web design. I just finished my first static website.
What i dont like about it is that the page often reload (each time you change section)

My question is “how to make this kind of nav : http://www.doblin.com/work/#innovation-strategy”

As you see the page doesnt reload when you click on “Set Innovation Strategy / Design, Build + Launch Innovations / Become Better Innovators”

How it s done ?

Is it possible on a static website (html/css/jquery) without sql or so (it may require ajax or …) ?

Thanks

Answer 1

Taking a look at the code, this page uses some jQuery functions to do this work, check it out:

$(window).hashchange( function(){

    var hash = location.hash;

    // if a hash has been set
    if(hash !== '') {

        showContent(hash, origSections);

    } else {

        // pass in "empty" hash
        showContent('', origSections);

    }


    return false;

});

// call hashchange on initial page load
$(window).hashchange();


// ----------- SHOW CONTENT  ----------- //
function showContent(active, all) {

    if (jQuery.support.opacity) {
        opacity = true;
    } else {
        opacity = false;
    }

This can also be done using CSS3 transitions and animations. Here’s a pen based on this Codrops tutorial. I particularly think this is a better approach

But if you want to get dynamic data from somewhere, i advise you to use Ajax(There are some cool jQuery stuff to handle this)