jQuery fullscreenNav

by Florian Bar

HTML

<a href="#fullnav1" class="menu-button">
    <span class="line line1"></span>
    <span class="line line2"></span>
    <span class="line line3"></span>
</a>

<div class="fullnav"> 
    <a href="#" class="fullnav-close">Close x</a>
    <ul>
        <li><a href="#">Home</a>
        </li>
        <li><a href="#">About us</a>
        </li>
        <li><a href="#">Contact us</a>
        </li>
        <li><a href="#">Home</a>
        </li>
        <li><a href="#">About us</a>
        </li>
        <li><a href="#">Contact us</a>
        </li>
        <li><a href="#">Home</a>
        </li>
        <li><a href="#">About us</a>
        </li>
        <li><a href="#">Contact us</a>
        </li>
        <li><a href="#">Home</a>
        </li>
        <li><a href="#">About us</a>
        </li>
        <li><a href="#">Contact us</a>
        </li>
        <li><a href="#">Contact us</a>
        </li>
        <li><a href="#">Home</a>
        </li>
        <li><a href="#">About us</a>
        </li>
        <li><a href="#">Contact us</a>
        </li>
    </ul>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam in, tenetur mollitia, velit beatae similique repellat doloribus error quas cum suscipit esse vero ratione, reiciendis sapiente provident. Labore, quasi aperiam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam in, tenetur mollitia, velit beatae similique repellat doloribus error quas cum suscipit esse vero ratione, reiciendis sapiente provident. Labore, quasi aperiam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam in, tenetur mollitia, velit beatae similique repellat doloribus error quas cum suscipit esse vero ratione, reiciendis sapiente provident. Labore, quasi aperiam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam in, tenetur mollitia, velit beatae similique repellat doloribus error quas cum suscipit esse vero ratione, reiciendis sapiente provident. Labore, quasi...

CSS

body {
    font-size: 100%;
    font-family: sans-serif;
    line-height: 1.25;
    margin: 0;
    padding: 15px;
}
body.fullnav-open {
    position: relative;
    overflow: hidden;
}
.menu-button {
    display: block;
    position: relative;
    width: 24px;
    height: 20px;
}
.menu-button .line {
    position: absolute;
    right: 0;
    left: 0;
    height: 4px;
    background: #333;
}
.menu-button .line1 {
    top: 0;
}
.menu-button .line2 {
    top: 8px;
}
.menu-button .line3 {
    bottom: 0;
}
.fullnav {
    display: none;
    opacity: 0.85;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 5;
    padding: 15px;
    background-color: #000;
    overflow-y: scroll;
    text-align: center;
}
.fullnav a {
    color: #fff;
    text-decoration: none;
}
.fullnav-close {
    position: fixed;
    top: 15px;
    left: 15px;
}
.fullnav ul {
    margin: 40px 0 0 0;
    padding: 6px;
    list-style-type: none;
    font-size: 30px;
    font-weight: normal;
}
.fullnav li {
    margin: 0 0 20px;
}

JavaScript

function getScrollBarWidth() {
    $('body').prepend('<div class="scrollBarWidthOuter red" />');
    var $outer = $('.scrollBarWidthOuter');
    $outer.css({
        'position': 'absolute',
        'top': '0',
        'left': '0',
            'visibility': 'hidden',
        'overflow': 'scroll',
            'width': '100%',
        'height': '50px'
    });

    $outer.html('<div class="scrollBarWidthInner blue" />');
    var $inner = $('.scrollBarWidthInner');
    $inner.css({
        'width': '100%',
        'height': '100px'
    });

    var outerWidth = $outer.outerWidth(true);
    var innerWidth = $inner.outerWidth(true);

    $outer.remove();

    return outerWidth - innerWidth;
}

function isScrollBarVisible() {
    if ($(window).height() < $(document).height()) {
        return true;
    }
    return false;
}

$(function () {

    //console.log(getScrollBarWidth());

    function open() {
        $('body')
            .addClass('fullnav-open')
            .css({
            'padding-right': '+=' + getScrollBarWidth() + 'px'
        });
        $('.fullnav').fadeIn(250);
    }

    function close() {
        $('.fullnav').fadeOut(250, function () {
            $('body')
                .removeClass('fullnav-open')
                .css({
                'padding-right': '-=' + getScrollBarWidth() + 'px'
            });
        });
    }

    $('a[href="#fullnav1"]').click(function (e) {
        if ($('body').hasClass('fullnav-open')) {
            close();
        } else {
            open();
        }

        e.preventDefault();
    });

    $('.fullnav-close').click(function (e) {
        close();
        e.preventDefault();
    });

});