title: How do i use jPanelMenu? (jquery menu plugin)
body: <p>I'm no javascript ninja, but i'd like to incorporate this library in a site targeting tablets.  Here is the library :
  <a href="http://jpanelmenu.com/" rel="nofollow">jPanelMenu</a></p>
  
  <p>Here is my redered html:</p>
  
  <pre><code>   &lt;script src="/Scripts/jquery-1.7.1.js"&gt;&lt;/script&gt;
  
  
  &lt;script src="/Scripts/jPanelMenu-1.0.0.min.js" type="text/javascript"&gt;&lt;/script&gt; 
  
  &lt;header class="main"&gt;
  
          &lt;ul id="menu"&gt;
              &lt;li&gt;&lt;a href="/"&gt;Overview&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#usage"&gt;Usage&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#inner-workings"&gt;Inner-Workings&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#animation"&gt;Animation&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#options"&gt;Options&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#api"&gt;API&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#tips"&gt;Tips &amp;amp; Examples&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#about"&gt;About&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
  &lt;/header&gt;
  &lt;script type="text/javascript"&gt;
      $(document).ready(function () {
          var jPM = $.jPanelMenu();
          jPM.on();
      });
  &lt;/script&gt;
  &lt;body&gt;
  </code></pre>
  
  <p>All i see in the browser is a normal UL bulleted list.  No Js errors in chromes dev tools. Anyone ever use this plugin or know what im doing wrong?</p>
  
  <p>Thanks!</p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>Here is updated code with solution from dbaseman</p>
  
  <pre><code>&lt;html&gt;
  &lt;script src="/Scripts/jquery-1.7.1.js"&gt;&lt;/script&gt;
  
  
  &lt;script src="/Scripts/jPanelMenu-1.0.0.min.js" type="text/javascript"&gt;&lt;/script&gt; 
  
  &lt;header class="main"&gt;
          &lt;div class="menu-trigger"&gt;Click Me&lt;/div&gt;
          &lt;ul id="menu" style="display: none;"&gt;
              &lt;li&gt;&lt;a href="/"&gt;Overview&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#usage"&gt;Usage&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#inner-workings"&gt;Inner-Workings&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#animation"&gt;Animation&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#options"&gt;Options&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#api"&gt;API&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#tips"&gt;Tips &amp;amp; Examples&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#about"&gt;About&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
  &lt;/header&gt;
  &lt;script type="text/javascript"&gt;
      $(document).ready(function () {
          var jPM = $.jPanelMenu();
          jPM.on();
      });
  &lt;/script&gt;
  &lt;body&gt;
  
  
  &lt;!DOCTYPE html&gt;
  
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta name="viewport" content="width=device-width" /&gt;
      &lt;title&gt;Index.Tablet&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div&gt;
          tablet home
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>