/*! Pushy - v0.9.1 - 2013-9-16 * Pushy is a responsive off-canvas navigation menu using CSS transforms & transitions. * https://github.com/christophery/pushy/ * by Christopher Yee */ /* Menu Appearance */ .pushy{ position: fixed; width: 270px; height: 100%; top: 0; z-index: 9999; background: #424347; font-size: 0.9em; font-weight: bold; overflow: auto; -webkit-overflow-scrolling: touch; /* enables momentum scrolling in iOS overflow elements */ } /* Menu Movement */ .pushy-left{ -webkit-transform: translate3d(-270px,0,0); -moz-transform: translate3d(-270px,0,0); -ms-transform: translate3d(-270px,0,0); -o-transform: translate3d(-270px,0,0); transform: translate3d(-270px,0,0); } .pushy-open{ -webkit-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } .container-push, .push-push{ -webkit-transform: translate3d(270px,0,0); -moz-transform: translate3d(270px,0,0); -ms-transform: translate3d(270px,0,0); -o-transform: translate3d(270px,0,0); transform: translate3d(270px,0,0); } /* Menu Transitions */ .pushy, #page, .push{ -webkit-transition: -webkit-transform .2s cubic-bezier(.16, .68, .43, .99); -moz-transition: -moz-transform .2s cubic-bezier(.16, .68, .43, .99); -o-transition: -o-transform .2s cubic-bezier(.16, .68, .43, .99); transition: transform .2s cubic-bezier(.16, .68, .43, .99); /* improves performance issues on mobile*/ -webkit-backface-visibility: hidden; -webkit-perspective: 1000; } /* Site Overlay */ .site-overlay{ display: none; } .pushy-active .site-overlay{ display: block; position: fixed; top: 0; right: 0; bottom: 0; left: 270px; z-index: 9999; } /* Example Media Query */ @media screen and (max-width: 768px){ .pushy{ font-size: 1.0em; } } .menu-btn{ width: 30px; height: 30px; line-height: 30px; text-align: center; color: #fff; border-radius: 0px 5px 5px 0px ; left: 0px; top:160px; position: fixed; display: block; z-index:100; background: #424347; cursor: pointer; }