Jquery Mobile Panel Example

Jquery Mobile Panel Example

by Juan Muñoz

HTML

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css">
<div data-role="page" id="demo-page" data-theme="d" data-url="demo-page">
    <div data-role="header" data-theme="c">
        <h1>Bikes</h1>
        <a href="#left-panel" data-icon="bars" data-iconpos="notext" data-shadow="false" data-iconshadow="false">Menu</a>
    </div>
    <div data-role="content">
        <p>Dummy data content</p>
    </div>
    <div data-role="footer">
        <h1><a href="http://shreerangpatwardhan.blogspot.com">Powered by: Spatial Unlimited</a></h1>
    </div>
    <div data-role="panel" id="left-panel" data-theme="c">
        <ul data-role="listview" data-theme="d">
            <li data-icon="delete"><a href="#" data-rel="close">Close</a></li>
            <li data-role="list-divider">Menu</li>
        </ul>
        <div data-role="collapsible" data-inset="false" data-iconpos="right" data-theme="d" data-content-theme="d">
            <h3>Categories</h3>
            <div data-role="collapsible-set" data-inset="false" data-iconpos="right" data-theme="b" data-content-theme="d">
                <div data-role="collapsible">
                    <h3>Bikes</h3>
                    <ul data-role="listview">
                        <li><a href="#">Road</a></li>
                        <li><a href="#">ATB</a></li>
                        <li><a href="#">Fixed Gear</a></li>
                        <li><a href="#">Cruiser</a></li>
                    </ul>
                </div>
                <div data-role="collapsible">
                    <h3>Cars</h3>
                    <ul data-role="listview">
                        <li><a href="#">SUV</a></li>
                        <li><a href="#">Sport</a></li>
                        <li><a href="#">Convertible</a></li>
                    </ul>
             ...

CSS

#demo-page #left-panel.ui-panel {
    width: 15em;
}
#demo-page #left-panel.ui-panel-closed {
    width: 0;
}
#demo-page .ui-panel-position-left.ui-panel-display-reveal {
    left: 0;
}
#demo-page .ui-panel-content-wrap-position-left.ui-panel-content-wrap-open,
.ui-panel-dismiss-position-left.ui-panel-dismiss-open {
    left: 15em;
    right: -15em;
}
#demo-page .ui-panel-animate.ui-panel-content-wrap-position-left.ui-panel-content-wrap-open.ui-panel-content-wrap-display-reveal {
    left: 0;
    right: 0;
    -webkit-transform: translate3d(15em,0,0);
    -moz-transform: translate3d(15em,0,0);
    transform: translate3d(15em,0,0);
}
#left-panel .ui-panel-inner > .ui-listview { margin-bottom: 0; }
#left-panel .ui-collapsible-set { margin: 0; }
#left-panel .ui-panel-inner > .ui-collapsible > .ui-collapsible-content { padding-top: 0; padding-bottom: 0;  border-bottom: none; }
#left-panel .ui-panel-inner  > .ui-collapsible > .ui-collapsible-heading .ui-btn,
#left-panel .ui-collapsible.ui-first-child .ui-collapsible-heading .ui-btn { border-top: none; }
#left-panel .ui-collapsible-heading .ui-btn-inner { padding: .7em 40px .7em 15px; }
#left-panel .ui-collapsible-set .ui-collapsible-heading .ui-btn-inner { padding: .5em 40px .5em 15px; font-size: 14px; }
#demo-page .ui-panel-inner > .ui-listview .ui-first-child {
    background: #eee;
}
#demo-page .ui-panel-display-reveal {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}
#demo-page .ui-panel-content-wrap-position-left { /* This is the class that you are missing */
    -webkit-box-shadow: -5px 0px 5px rgba(0,0,0,.15);
    -moz-box-shadow: -5px 0px 5px rgba(0,0,0,.15);
    box-shadow: -5px 0px 5px rgba(0,0,0,.15);
}
#demo-page .ui-body-d {
    background-image: url(../../_assets/img/bg-pattern.png);
    background-repeat: repeat-x;
    background-position: left bottom;
}