CODEWITHSUNDEEP
phpjavascriptjquerytwitter-bootstrap
Paul
Paul

Reputation: 11746

page slide for exposing left menu with twitter bootstrap

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?

Upvotes: 0

Views: 797

Answers (2)

dc5
dc5

Reputation: 12441

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.

Upvotes: 1

Carlos Duque Yemail
Carlos Duque Yemail

Reputation: 196

You could try using then panel widget from the latest jquerymobile (1.3.0). Maybe this is not what you want but there are options so you could do it programatically. http://view.jquerymobile.com/1.3.1/dist/demos/widgets/panels/panel-fixed.html

Upvotes: 0

Related Questions