4ptf0g
Last Updated: February 25, 2016
·
1.22K
· sk5

Mobile Slide Navigation

The most simple way I have come across to achieve the "hidden slide nav" on mobile sites without creating additional code is to simply assign the wrapping element of your navigation a fixed position (which can either be off of the page, or behind the rest of the page contents). The only additional code which needs to be added is the mobile button itself which will move the entire rest of the page and bring in the mobile navigation.

Additionally, you need to be sure to add some window.resize code in JQuery to make sure the hidden elements do not remain hidden when the site goes from mobile to tablet etc.

Here is the code:

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

You will likely want to make sure the nav width is not 100% to ensure that you can still see the Mobile Nav button that you can toggle to get to and from the navigation.

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()
}
})