JSFiddle - React, Tailwind, and code Playground

by Tom DeBerardine

HTML

<script src="http://demos.jquerymobile.com/1.4.0/js/jquery.js"></script>
<link rel="stylesheet" href="http://demos.jquerymobile.com/1.4.0/css/themes/default/jquery.mobile-1.4.0.min.css">
<script src="http://demos.jquerymobile.com/1.4.0/js/jquery.mobile-1.4.0.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<div data-role="page" class="jqm-demos" data-quicklinks="true">
    <div data-role="header">
        	<h1>External panels</h1>

    </div>
    <div role="main" class="ui-content jqm-content jqm-fullwidth">	<a href="#externalpanel" class="ui-btn ui-shadow ui-corner-all ui-btn-inline ui-mini">Open External Panel</a>

    </div>
</div>
<div data-role="panel" id="externalpanel" data-position="left" data-display="reveal" data-theme="a">
     <h2>Menu</h2>

    <ul data-role="listview" style="padding-right: 8px">
        <li data-icon="false"><a href="#" class='sub1'>Submenu 1</a>

        </li>
        <li data-icon="false"><a href="#" class="sub2">Submenu 2</a>

        </li>
    </ul>
    <!-- submenu -->
    <div class='ui-sub-panel' id='submenu1'>
        <div class='ui-header' data-theme='a'> <a href='#' class='ui-btn ui-btn-right ui-btn-icon-notext ui-icon-delete panel-close'></a>

             <h1 class='ui-title'>Submenu1</h1>

        </div> <a href="#" class="sub2 ui-btn">Go to Submenu 2</a>

        <div class="ui-contet">
            <div data-role="collapsible">
                 <h4>Heading</h4>

                <ul data-role="listview">
                    <li><a href="#">List item 1</a>
                    </li>
                    <li><a href="#">List item 2</a>
                    </li>
                    <li><a href="#">List item 3</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class='ui-sub-panel' id='submenu2'>
        <div class='ui-header' data-theme='a'> <a href='#' class='ui-btn ui-btn-right ui-btn-icon-notext ui-icon-delete panel-close'></a>

  ...

CSS

.ui-sub-panel {
    width: 100%;
    position: absolute;
    top: 0;
    left: -100%;
    min-height: 100%;
    max-height: none;
}
.ui-sub-panel-open {
    -moz-transform: translate3d(100%, 0, 0);
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
}
.ui-sub-panel-animate {
    -webkit-transition: -webkit-transform 500ms ease;
    -moz-transition: -moz-transform 500ms ease;
    transition: transform 500ms ease;
}
.ui-sub-panel-close {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
#submenu1 {
    background: lightgray;
}
#submenu2 {
    background: lightblue;
}

JavaScript

/* enhance panel and its' contents */
$(function () {
    $("body>[data-role='panel']").panel().enhanceWithin();
});

/* close sub menus once main panel is closed */
$("#externalpanel").on("panelbeforeclose", function () {
    $('#submenu1, #submenu2')
        .addClass('ui-sub-panel-close ui-sub-panel-animate')
        .removeClass("ui-sub-panel-open");
});

/* open submenu1 */
$('.sub1').on('click', function () {
    $('#submenu1')
        .addClass('ui-sub-panel-open ui-sub-panel-animate')
        .removeClass("ui-sub-panel-close");
});

/* open submenu2 */
$('.sub2').on('click', function () {
    $('#submenu2')
        .addClass('ui-sub-panel-open ui-sub-panel-animate')
        .removeClass("ui-sub-panel-close");
});

/* close panel where close button is clicked */
$('.panel-close').on('click', function () {
    $(this)
        .closest(".ui-sub-panel")
        .addClass('ui-sub-panel-close ui-sub-panel-animate')
        .removeClass("ui-sub-panel-open");
});