title: uncaught typeError: cannot read property 'querySelectorAll' of null
body: <p>I am trying to use this menu for mobile on a site. 
  <a href="http://tympanus.net/codrops/2013/08/13/multi-level-push-menu/comment-page-8/#comment-466199" rel="noreferrer">http://tympanus.net/codrops/2013/08/13/multi-level-push-menu/comment-page-8/#comment-466199</a></p>
  
  <p>I have it working but one ie11 user is reporting an error and i am seeing the following error in console 
  Uncaught TypeError: Cannot read property 'querySelectorAll' of nullmlPushMenu._init @ mlpushmenu.js:89mlPushMenu @ mlpushmenu.js:67(anonymous function) @ (index):1062</p>
  
  <p>Here is a snippet of the js file in question </p>
  
  <pre class="lang-js prettyprint-override"><code>function mlPushMenu( el, trigger, options ) {   
      this.el = el;
      this.trigger = trigger;
      this.options = extend( this.defaults, options );
      // support 3d transforms
      this.support = Modernizr.csstransforms3d;
      if( this.support ) {
          this._init();
      }
  }
  
  mlPushMenu.prototype = {
      defaults : {
          // overlap: there will be a gap between open levels
          // cover: the open levels will be on top of any previous open level
          type : 'overlap', // overlap || cover
          // space between each overlaped level
          levelSpacing : 40,
          // classname for the element (if any) that when clicked closes the current level
          backClass : 'mp-back'
      },
      _init : function() {
          // if menu is open or not
          this.open = false;
          // level depth
          this.level = 0;
          // the moving wrapper
          this.wrapper = document.getElementById( 'mp-pusher' );
          // the mp-level elements
          this.levels = Array.prototype.slice.call( this.el.querySelectorAll( 'div.mp-level' ) );
          // save the depth of each of these mp-level elements
          var self = this;
          this.levels.forEach( function( el, i ) { el.setAttribute( 'data-level', getLevelDepth( el, self.el.id, 'mp-level' ) ); } );
          // the menu items
          this.menuItems = Array.prototype.slice.call( this.el.querySelectorAll( 'li' ) );
          // if type == "cover" these will serve as hooks to move back to the previous level
          this.levelBack = Array.prototype.slice.call( this.el.querySelectorAll( '.' + this.options.backClass ) );
          // event type (if mobile use touch events)
          this.eventtype = mobilecheck() ? 'touchstart' : 'click';
          // add the class mp-overlap or mp-cover to the main element depending on options.type
          classie.add( this.el, 'mp-' + this.options.type );
          // initialize / bind the necessary events
          this._initEvents();
      },
  </code></pre>
  
  <p>the specific line 89 is in the middle of that so here it is pulled out for your orientation </p>
  
  <pre><code>this.levels = Array.prototype.slice.call( this.el.querySelectorAll( 'div.mp-level' ) );
  </code></pre>
  
  <p>I have then called the instance of the plugin in my footer (thats the index line 1082 </p>
  
  <p>that call looks like this </p>
  
  <pre><code>&lt;script&gt;
      new mlPushMenu(
          document.getElementById( 'mp-menu' ),
          document.getElementById( 'trigger' ),
          { type : 'cover' }
      );
  &lt;/script&gt;
  </code></pre>