window.history.pushState Implementation

HTML

<h1>Navegação sem atualização <span></span></h1>
    <h2> Pagina Corrente: <span>/</span></h2>
    <ul id="menu-nav">
        <li><a href="/page-1/" title="Pagina 1">Pagina 1</a></li>
        <li><a href="/page-2/" title="Pagina 2">Pagina 2</a></li>
        <li><a href="/page-3/" title="Pagina 3">Pagina 3</a></li>
    </ul>

CSS

body {margin:10px}
h1 {font-size:20px}

JavaScript

var setCurrentPage = function(url) {
    $('h2 span').html(url || "/");
    $("#menu-nav a[href='" + url + "']").fadeTo(500, 0.3);
};

$('#menu-nav a').click(function(e){
    e.preventDefault();
    var targetUrl = $(this).attr('href'),
        targetTitle = $(this).attr('title');
    
    $("#menu-nav a[href='" + window.location.pathname + "']").fadeTo(500, 1.0);
    
    window.history.pushState({url: "" + targetUrl + ""}, targetTitle, targetUrl);
    setCurrentPage(targetUrl);
});

window.onpopstate = function(e) {
    $("#menu-nav a").fadeTo('fast', 1.0);
    setCurrentPage(e.state ? e.state.url : null);
};