用于通过twitter bootstrap显示左侧菜单的页面幻灯片

Question

I'm trying to emulate or find a plugin that slides the page over exposing a navigation menu like this twitter bootstrap template:

If you resize the page you'll see the option in the header row to slide the page over.

I've looked through the javascript code but don't see how this is accomplished.

I also found this git project for pageslide but it slides the entire page.

Any idea how this bootstrap page slides the menu out for smaller resolution devices?

Answer 1

It's basically page structure and some css3 transforms/styles.

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

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

When open (abbreviated):

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

When closed (abbreviated):

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

In this case, the entire #wrap element is being shifted over.

I've created a gist for a very simple/stripped down version of a page that has basic support for both newer and some older browsers. I did not add media query support. Media query support can be added for older browser via libraries like respondjs.