jQuery mobile v1.3.0 simple facebook-like/ slide panel example

css:

.ui-responsive-panel {
    z-index: 1;
    border-right: none;
    width:180px;
}

.ui-panel-animate.ui-panel-content-fixed-toolbar-position-left.ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-reveal, .ui-panel-animate.ui-panel-content-fixed-toolbar-position-left.ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-push, .ui-panel-animate.ui-panel-content-wrap-position-left.ui-panel-content-wrap-open.ui-panel-content-wrap-display-reveal, .ui-panel-animate.ui-panel-content-wrap-position-left.ui-panel-content-wrap-open.ui-panel-content-wrap-display-push {
    left: 0;
    right: 0;
    margin-left:-100px;
}


html:
<div data-role="page" >
        <div data-role="panel" id="left-panel" data-theme="a" data-position="left" data-position-fixed="false" data-display="push" class="ui-responsive-panel">
        </div>

        <div data-role="header" data-theme="b" data-position="fixed">

             <h1>my header</h1>
             <a href="#left-panel" data-icon="bars" data-iconpos="notext" data-shadow="false" data-iconshadow="false" class="ui-icon-nodisc">Open left panel</a>

        </div>

        <div data-role="content" ></div>  
        <div data-role="footer" data-theme="b" data-position="fixed"></div>
</div>