javascript - JQuery Mobile Sliding Panel with nested menu/ multi-level menu

Question

I have been working on multi-level menu's or sub-menu's on my jquery mobile and generally 3rd partly jquery plugins have been deeply messing with my CSS relating to position:fixed footer and scrolling.

I looked at the plugin's here and almost all of them are complicating things for me. I was hoping I could recreate this example with some magic from the existing jquery mobile framework as seen here

Answer 1

Left-hand Panel and submenus:

Here is a fast solution just to give you an idea. It has big room for improvement, so I will update this answer whenever I do any changes.

Create Submenus as much as you want, each one with a unique id and a close button with a class. Place Submenus inside main jQM panel.

1. Submenu HTML structure

   <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'>Close</a>
       <h1 class='ui-title'>Submenu1</h1>
     </div>
     <div class="ui-content">
       <!-- submenu contents here -->
     </div>
   </div>
   

2. CSS

   • Full height, width and positioned outside page.

     .ui-sub-panel {
       width: 100%;
       position: absolute;
       top: 0;
       left: -100%;
       min-height: 100%;
       max-height: none;
     }
     

   • Open Submenu

     .ui-sub-panel-open {
       -moz-transform: translate3d(100%, 0, 0);
       -webkit-transform: translate3d(100%, 0, 0);
       transform: translate3d(100%, 0, 0);
     }
     

   • Close Submenu

     .ui-sub-panel-close{
       -moz-transform: translate3d(0, 0, 0);
       -webkit-transform: translate3d(0, 0, 0);
       transform: translate3d(0, 0, 0);
     }
     

   • Animate close/open

     .ui-sub-panel-animate {
       -webkit-transition: -webkit-transform 500ms ease;
       -moz-transition: -moz-transform 500ms ease;
       transition: transform 500ms ease;
     }
     

3. JS

   • Close all submenus once main jQM panel is closed

     $("#externalpanel").on("panelbeforeclose", function () {
       $('#submenu1, #submenu2')
           .addClass('ui-sub-panel-close ui-sub-panel-animate')
           .removeClass("ui-sub-panel-open");
     });
     

   • Open first submenu

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

   • Open second submenu

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

   • Close Submenu 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");
     });
     

Demo ⁽¹⁾

---

Update 1

Right-hand Panel and submenus:

To position panel to right side, add data-position="right" attribute to panel div. Also, in .ui-sub-panel class, change left to right.

.ui-sub-panel {
   ...
   right: -100%;
   ...
}

Demo ⁽¹⁾

---

^{(1) Tested on Safari - iPhone 5 iOS 7.0.6 & iPad 2 iOS 7.1}