responsive menu with bootstrap

miniaturize-jquery.js

// requires jquery

var abidibo = abidibo || {};

abidibo.menu = {};

// miniaturized menu
abidibo.menu.miniaturize = function(event) {
    // ff mobile
    window.scrollTo(0, 0);
    // stop propagation otherwise the main-container click event could be fired
    event.stopPropagation();
    // target
    var target = jQuery(jQuery(this).attr('data-target'));
    // viewport coordinates
    // it seems that translateX 100% takes into account the width of images inside
    // the document even if they have .img-responsive class, so we fix the width
    // I do not use jQuery(window).height() since it fails on ff mobile
    var viewport_height = window.innerHeight || $(window).height,
        viewport_width = window.innerWidth || $(window).width;
    // wrap all body content inside two divs
    var wrapper = jQuery('<div/>', {id : 'wrapper'});
    var main_container = jQuery('<div/>', {id : 'main-container'}).css({
        height: viewport_height + 'px',
        width: viewport_width + 'px',
        overflow: 'hidden'
    });
    jQuery(document.body).children().wrapAll(main_container);
    jQuery(document.body).children().wrapAll(wrapper);
    // add miniature class to body, the delay assures a smooth css3 animation
    setTimeout(function() { jQuery(document.body).addClass('miniature'); }, 200);
    // now show the collapsed content
    var content = target.clone().removeClass('collapse').appendTo(jQuery(document.body));

    // drive me back!
    jQuery(document.body).on('click', '#main-container', function(evt) {
        evt.stopPropagation();
        // prevent links to be fired
        evt.preventDefault();
        // update selector var
        var main_container = jQuery('#main-container');
        // intermediate class to allow for css transition
        jQuery(document.body).removeClass('miniature').addClass('miniature-back');
        main_container.off('click');
        content.remove();
        setTimeout(function() {
            // remove wrappers
            main_container.unwrap();
            main_container.children().unwrap();
            jQuery(document.body).removeClass('miniature-back'); 
        }, 1000);
    });
}

jQuery(document).ready(function() {
    jQuery('button[data-toggle=collapse]').each(function(index, btn) {
        jQuery(btn).on('click', abidibo.menu.miniaturize);
    });
})

miniaturize-mootools.js

// requires mootools

var abidibo = abidibo || {};

abidibo.menu = {};

abidibo.menu.miniaturize = function(event) {
    // ff mobile
    window.scrollTo(0, 0);
    // stop propagation otherwise the main-container click event could be fired
    event.stopPropagation();
    // target
    var target = $(this.get('data-target'));
    // viewport coordinates
    // it seems that translateX 100% takes into account the width of images inside
    // the document even if they have .img-responsive class, so we fix the width
    var viewport_height = window.innerHeight,
        viewport_width = window.innerWidth;
    // wrap all body content inside two divs
    var main_container = new Element('#main-container');
    document.body.getChildren().each(function(el) {
        main_container.wraps(el);
    })
    var wrapper = new Element('#wrapper').wraps(main_container);
    // size main_container
    main_container.setStyles({
        height: viewport_height + 'px',
        width: viewport_width + 'px',
        overflow: 'hidden'
    });
    // add miniature class to body, the delay assures a smooth css3 animation
    setTimeout(function() { document.body.addClass('miniature'); }, 100);
    // now show the collapsed content
    var content = target.clone().removeClass('collapse').inject(document.body);

    // drive me back!
    main_container.addEvent('click', function(evt) {
        evt.stopPropagation();
        // prevent links to be fired
        evt.preventDefault();
        // intermediate class to allow for css transition
        document.body.removeClass('miniature').addClass('miniature-back');
        main_container.removeEvents('click');
        content.dispose();
        setTimeout(function() {
            // remove wrappers
            main_container.getChildren().each(function(el) {
                el.inject(document.body);
            })
            wrapper.dispose();
            document.body.removeClass('miniature-back'); 
        }, 1000);
    });

}

window.addEvent('load', function() {
    $$('button[data-toggle=collapse]').each(function(btn) {
        btn.addEvent('click', abidibo.menu.miniaturize);
    });
})

miniaturize.less

// requires bootstrap
#main-container {
    .transition-transform(0.4s ease 0s);
}
.miniature {
    background-color: #222;
    #wrapper {
        .perspective(1500px);
        position: fixed;
    }
    #main-container {
        background-color: #fff;
        cursor: pointer;
        .transform-origin(50% 50% 0);
        .transition-transform(0.4s ease 0s);
        -webkit-transform: translateZ(-1500px) translateX(100%) rotateY(-45deg);
        transform: translateZ(-1500px) translateX(100%) rotateY(-45deg);
        .backface-visibility(hidden);
    }

    .navbar-collapse {
        position: absolute;
        top: 20px;
        left: 20px;
        box-shadow: 0 0 0 #222;
    }
}
.miniature-back {
    background-color: #222;
    #wrapper {
        .perspective(1500px);
    }
    #main-container {
        background-color: #fff;
        cursor: pointer;
        .transform-origin(50% 50% 0);
        .transition-transform(0.4s ease 0s);
        -webkit-transform: translateZ(0px) translateX(0%) rotateY(0deg);
        transform: translateZ(0px) translateX(0%) rotateY(0deg);
    }
}