title: Toggle class for icon if menu is active or inactive. Multi-level push menu
body: <p>I am using the multi-level push menu as found <a href="http://multi-level-push-menu.make.rs/" rel="nofollow">here</a> </p>
  
  <p>I am trying to add and remove a class when the menu is in the active or inactive state.</p>
  
  <p>I've tried to implement this on my own using a function which is toggled on an inactive class (.multilevelpushmenu_inactive) but I could not get that to work. So now I am trying to use the inbuilt callback functions. </p>
  
  <p>These are documented <a href="http://multi-level-push-menu.make.rs/#events" rel="nofollow">here</a></p>
  
  <p>The issue seems to be that there is no callback for detecting when the menu is inactive (ie when all animations have completed and the menu is back at the starting position). The onCollapseMenuEnd for example will fire when any of the sub menus are opened/closed. </p>
  
  <p>I have put everything in a fiddle, but my code looks like this: </p>
  
  <pre><code> // global vars
  var _leftMenu = $('#leftMenu');
  var _icon = _leftMenu.find('.fa');
  var _menu = _leftMenu.find('.vert');
  
  // pushmenu options
  _leftMenu.multilevelpushmenu({
      containersToPush: [$()],
      collapsed: true,
      backText: '',
      backItemIcon: 'fa fa-reply',
      menuHeight: '100%',
      onExpandMenuStart: function () {
          _icon.addClass('fa-times').removeClass('fa-reorder');
          _menu.fadeOut();
      },
      onMenuReady: function () {
          _icon.addClass('fa-reorder').removeClass('fa-times');
          _menu.fadeIn();
      }
  });
  </code></pre>
  
  <p><strong><a href="http://jsfiddle.net/lharby/61odroot/1/" rel="nofollow">Fiddle 1</a></strong></p>
  
  <p>I am not sure if there is a way to trigger the onMenuReady callback inside another callback function. </p>
  
  <p>I can add HTML into the question if that helps, but everything is available in the fiddle.</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>For what it's worth, I've made a fiddle showing my original function working on the navigation element. This is almost working entirely, the exception is when you drill down to a deeper navigation item (Select Motivate, then either of the sub menus) when you try and close the navigation, the classes are not being toggled in the final step). Here is the jquery for this function:</p>
  
  <pre><code>_icon.on('click',function(){
      if($('.multilevelpushmenu_inactive')[0]){
          _menu.fadeOut();
           $(this).addClass('fa-times').removeClass('fa-reorder');
      }else{
          _menu.delay(500).fadeIn();
          $(this).addClass('fa-reorder').removeClass('fa-times');
      }
  });
  </code></pre>
  
  <p><strong><a href="http://jsfiddle.net/lharby/rxftnsno/1/" rel="nofollow">Fiddle 2</a></strong></p>