Skip to content

Instantly share code, notes, and snippets.

@alvarotrigo
Created August 27, 2015 11:30
Show Gist options
  • Save alvarotrigo/7efc4be025dedff10a35 to your computer and use it in GitHub Desktop.
Save alvarotrigo/7efc4be025dedff10a35 to your computer and use it in GitHub Desktop.
Offset canvas push menu
<div id="offmenu">
<ul>
<li>aaa</li>
<li>aaa</li>
<li>aaa</li>
<li>aaa</li>
</ul>
</div>
<i id="push" class="fa fa-bars"></i>
<div class="box">Off set menu</div>
<div class="box">Off set menu</div>
<div class="box">Off set menu</div>
<div class="box">Off set menu</div>
<div class="box">Off set menu</div>
// Demo online: http://jsfiddle.net/x4dw7txo/
//offset menu to choose another system
$('#push').click(function() {
var $body = $('body');
$('body').addClass('offset-menu-animation');
//disabling body scroll
$body.addClass('noScrollbar');
//chaning the burger menu icon to an X
$(this).toggleClass('fa-bars').toggleClass('fa-times');
//making it synchronous
setTimeout(function(){
$body.toggleClass('offset-menu-active');
//after animation finishes
setTimeout(function(){
$body.removeClass('offset-menu-animation');
//enabling body scroll when the menu gets closed
if(!$body.hasClass('offset-menu-active')){
$body.toggleClass('noScrollbar');
}
},600);
});
});
html,body{
height: 100%;
margin: 0;
padding:0;
}
body {
background:red;
}
body.noScrollbar{
overflow: hidden;
}
body.offset-menu-active{
position: relative;
overflow: hidden;
transform: translate3d(300px, 0,0);
-webkit-transform: translate3d(300px,0, 0);
-moz-transform: translate3d(300px, 0, 0);
-o-transform: translate3d(300px, 0, 0);
}
#offmenu{
left: -400px;
position:absolute;
top:0;
width: 400px;
background:black;
position:absolute;
background:#393939;
z-index: 100;
height: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.offset-menu-animation{
-webkit-transition: all 400ms ease-out;
-moz-transition: all 400ms ease-out;
-o-transition: all 400ms ease-out;
transition: all 400ms ease-out;
}
.box{
width:100%;
padding: 20px;
margin: 0 0 50px 50px;
background:grey;
}
#push{
font-size: 33px;
position: absolute;
top: 14px;
left: 14px;
right: 0;
margin: 0 auto;
cursor:pointer;
}
#push:hover{
color: #fff;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment