Los paneles de jQueryMobile se pueden usar como menús de navegación desplegables, en este caso lo ideal es definir una sola vez el contenido el panel y poder usarlo en todas las páginas de la aplicación.

Para usar un panel externo como menú, es necesario aplicar los estilos manualmente con “enhanceWithin()”, ya que jQueryMobile no lo hace por defecto, de no hacerlo, el menú sería una simple lista:

<script>
        $(function() {
            $( "body>[data-role='panel']" ).panel().enhanceWithin();
        });
</script>

Este es un ejemplo de un panel externo usado como menú.

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>External panels - jQuery Mobile Demos</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
    <link rel="stylesheet"  href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css">  
    <script>
        $(function() {
            $( "body>[data-role='panel']" ).panel().enhanceWithin();
        });
    </script>
</head>
<body>
<div data-role="page" data-quicklinks="true">
    <div data-role="header">
        <h1>External panels</h1>
        <a href="../panel/" data-rel="back" class="ui-btn ui-btn-left ui-alt-icon ui-nodisc-icon ui-corner-all ui-btn-icon-notext ui-icon-carat-l">Back</a>
    </div><!-- /header>
    <div role="main" class="ui-content jqm-content jqm-fullwidth">

        <h1>External Panels</h1>
        <p>The panels below are all located outside the page. Panels outside of a page must be initalized manually and will not be handled by auto init. Panels outside of pages will remain in the DOM (unless manually removed) as long as you use Ajax navigation, and can be opened or closed from any page.</p>
        <p>Navigate to page 2 to see this behavior. The HTML document for page 2 doesn't contain panel markup, but you can still open the panels.</p>
        <p><a href="page-b.html">Navigate to page 2</a></p>
        <p><strong>Left</strong> panel examples</p>
        <a href="#leftpanel1" class="ui-btn ui-shadow ui-corner-all ui-btn-inline ui-mini">Reveal</a>
        
    </div><!-- /content -->

</div><!-- /page -->

    <div data-role="panel" id="leftpanel1" data-position="left" data-display="reveal" data-theme="a" >

     <ul data-role="listview" style="margin-top:-16px;">
                        <li data-icon="delete" style="background-color:#111;">
                            <a href="#" data-rel="close">Close menu</a>
                        </li>
                        <li data-filtertext="ajax navigation model">
                            <a href="../pages/page-navmodel.html">Ajax navigation model</a>
                        </li>
                        <li data-filtertext="anatomy of page viewport">
                            <a href="../pages/page-anatomy.html">Anatomy of a page</a>
                        </li>
                        <li data-filtertext="events api animationComplete transition css">
                            <a href="../api/events.html">Animation events</a>
                        </li>
                        <li data-filtertext="listview autodivider">
                            <a href="../lists/lists-autodividers.html">Automatic listview dividers</a>
                        </li>
                        <li data-filtertext="button link submit cancel image reset mini buttonmarkup enable disable">
                            <a href="../buttons/buttons-types.html">Buttons</a>
                        </li>
                        <li data-filtertext="button icon">
                            <a href="../buttons/buttons-icons.html">Button icons</a>
                        </li>
                        <li data-filtertext="data-prefetch loadpage domCache data-dom-cache size clear cleanup pagehide lazyload spinner loader">
                            <a href="../pages/page-cache.html">Caching pages</a>
                        </li>
                        <li data-filtertext="input forms multi select checkbox checks grouped horizontal toggle legend">
                            <a href="../forms/checkboxes/">Checkbox</a>
                        </li>
                        <li data-filtertext="button icon">
                            <a href="buttons/buttons-icons.html">Button icons</a>
                        </li>
                        <li data-filtertext="data-prefetch loadpage domCache data-dom-cache size clear cleanup pagehide lazyload spinner loader">
                            <a href="../pages/page-cache.html">Caching pages</a>
                        </li>
                        <li data-filtertext="input forms multi select checkbox checks grouped horizontal toggle legend">
                            <a href="../forms/checkboxes/">Checkbox</a>
                        </li>
                    </ul>

    </div><!-- /leftpanel1 -->
</body>
</html>