Navegação de slides móvel

A maneira mais simples que descobri de obter a “navegação de slides oculta” em sites para celular sem criar código adicional é simplesmente atribuir ao elemento de agrupamento de sua navegação uma posição fixa (que pode estar fora da página ou atrás do resto do conteúdo da página). O único código adicional que precisa ser adicionado é o próprio botão móvel, que moverá todo o resto da página e trará a navegação móvel.

Além disso, você precisa ter certeza de adicionar algum código window.resize em JQuery para garantir que os elementos ocultos não permaneçam ocultos quando o site muda do celular para o tablet, etc.

Aqui está o código:

HTML

<nav class="span12">
    /* Mobile button -- Hidden in other media queries */
    <span class="mobile"><i class="icon-reorder"></i></span>
    /* Navigation */
<ul id="primary">
    <li class="mobileLink">
            <a href="Index.html"><i class="icon-home"></i> Home</a>
        </li>
        <li>
            <a href=""><i class="icon-info-sign"></i> Nav Link 1</a>
        </li>
    <li>
            <a href=""><i class="icon-group"></i> Nav Link 2</a>
        </li>
    </ul>
</nav>

CSS

Você provavelmente vai querer ter certeza de que a largura de navegação não é 100% para garantir que você ainda possa ver o botão Nav móvel que pode alternar para entrar e sair da navegação.

nav { background:#color; width:85%; position:fixed; top:0; bottom:0; left:-98%; margin:0; z-index:9999; }
nav > ul#primary > li.mobileLink { display:block; }

JQuery

$('.mobile').click(function() {
    if($(this).hasClass('active')) {
        $(this).removeClass('active');
        $('nav').animate({left:"-100%"},200);
        $('nav>.mobile').animate({left:"4%"},200);
        $('Element that wraps around site content').animate({"margin-left":"0"},200);
    } else {
        $(this).addClass('active');
        $('nav').animate({left:"0%"},200);
        $('nav>.mobile').animate({left:"87%"},200).addClass("active");
        $('Element that wraps around site content').animate({"margin-left":"83%"},200);
    }
})

$(window).resize(function() {
if($(window).width() > 530) {
    $('nav').children('ul').show();
    $('.container').css({"margin-left":"auto"});
} else if($(window).width() < 530) {
    $('nav').children('ul').show()
}
})