javascript - Enhancing a jQuery Mobile Menu System

Question

@Omar has created a cool ios style menu system here

I need a few modifications.

1) When the new submenu slides in, the previous menu should slide out.

2) The new submenu should inherit the same background color as the previous menu

Answer 1

You need to close open menu while opening the other one. Inside click handler which opens either menu, add the following:

$(".ui-sub-panel-open")
    .addClass('ui-sub-panel-close ui-sub-panel-animate')
    .removeClass("ui-sub-panel-open");

This will close open menu then slide next one; complete code.

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

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

Regarding background color, add any color you want to ui-sub-panel-open and another color (if you want) to ui-sub-panel-close.

.ui-sub-panel-open {
  -moz-transform: translate3d(-17em, 0, 0);
  -webkit-transform: translate3d(-17em, 0, 0);
  transform: translate3d(-17em, 0, 0);
  background: lightblue;
}

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

And don't forget to remove the below CSS

#submenu1 {
  background: color;
}

#submenu2 {
  background: color;
}

---

Update

To slide closed panel to left, modify .ui-sub-panel-close as follows.

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

Then you should return submenu to its' original position, by listening to transitionend events.

$(document).on("transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd", "#submenu1, #submenu2", function () {
  var position = $(this).offset().left;
  if (position < 0) {
    $(this).removeClass("ui-sub-panel-close ui-sub-panel-animate");
  }
});

Demo