php - page slide for exposing left menu with twitter bootstrap -


i'm trying emulate or find plugin slides page on exposing navigation menu twitter bootstrap template:

if resize page you'll see option in header row slide page over.

i've looked through javascript code don't see how accomplished.

i found git project pageslide slides entire page.

any idea how bootstrap page slides menu out smaller resolution devices?

it's page structure , css3 transforms/styles.

<div id="wrap">     <div id="menu" role="navigation"></div>     <div id="main" role="main"></div> </div> 

the page uses media queries set styles based on available screen real-estate , applying style js-menu html element:

when open (abbreviated):

@media screen , (max-width: 950px)     .js-advanced.js-menu #wrap {         -webkit-transform: translate3d(280px, 0, 0);     } 

when closed (abbreviated):

@media screen , (max-width: 950px)     .js-advanced #wrap {         -webkit-transition: -webkit-transform 500ms ease;         -webkit-transform: translate3d(0, 0, 0);     } 

in case, entire #wrap element being shifted over.

i've created gist simple/stripped down version of page has basic support both newer , older browsers. did not add media query support. media query support can added older browser via libraries respondjs.


Comments

Popular posts from this blog

javascript - DIV "hiding" when changing dropdown value -

Does Firefox offer AppleScript support to get URL of windows? -

android - How to install packaged app on Firefox for mobile? -