Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
responsive menu with bootstrap
// 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);
});
})
// 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);
});
})
// 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);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.