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
Post a Comment