Bootstrap 3.1.1: Offcanvas Menu

Off Canvas Menu created with Bootstrap 3.1.1 with very minimal javascript utilizing CSS3 animations.

First things first, lets see a demo

Bootstrap already takes care of showing the .navbar-toggle when it is on the x-small window size.

I have styled the .navbar-collapse.collapse to be positioned absolute by default. Only in the other media queries am I switching it to relative. Now when someone toggles the .navbar-toggle we are simply adding the .in class and the left css property is being adjusted

The second section of javascript is there in case someone is on a desktop and happens to drag their window beyond the x-small bootstrap size. This will remove the class, and use the media queries to position the menu relative again.

$('document').ready(function () {
    $('.navbar-toggle').on('click', function () {
        $('.collapse, #mainContainer').toggleClass('in');
    });
});

$(window).resize(function () {
    if ($(window).width() > 768) {
        $('.collapse, #mainContainer').removeClass('in');
    };
});

Large View

Small View

Small Menu View

The Trick?

This is the default styling I'm giving the menu. When the .in class is added it can leverage CSS3's transition property to animate the menu.

.navbar-collapse.collapse {
    border: none;
    display: block;
    background: #151515;
    position: absolute;
    left: -100%;
    top: 70px;
    width: 80%;
    max-height: none;
    -webkit-transition: left 0.5s ease;
    -moz-transition: left 0.5s ease;
    -o-transition: left 0.5s ease;
    transition:  left 0.5s ease;
}

.navbar-collapse.collapse.in {
        left: 15px;
}

Media Queries

Along with the second block of javascript listed above, I leverage media queries to position the navigation back to relative beyond the bootstrap x-small size

@media (min-width: 768px) { 
.navbar-collapse.collapse {
    width: auto;
    background: none;
    position: relative;
    left: auto;
    top: auto;
    padding: 0px;
    margin: 25px 0 35px 50px;
}