JPanelMenu does not create the JPanelMenu-Menu class

Question

The JpanelMenu will not create the additional class and I can't figure out why.

I placed linked to the site with this HEAD

    <script type="text/javascript" src="http://jpanelmenu.com/js/lib/jquery.jpanelmenu.min.js"></script>

I then placed the script to enable the sidebar directly underneath it in the HEAD

<script type="text/javascript">
    $(document).ready(function () {
        var jPM = $.jPanelMenu();
        jPM.on();
    });
</script>

I then placed the code for the nav within the HEADER

        <a class="menu-trigger" href="#menu">Click Me</a>
    <ul id="menu" style="display: none;">
        <li><a href="/">Overview</a></li>
        <li><a href="#usage">Usage</a></li>
        <li><a href="#about">About</a></li>
    </ul>

But then when I run the page inspector, the "click me" works and opens but the sidebar is empty. It will NOT create the following class:

<ul id="jPanelMenu-menu" style="width: 250px; display: block; z-index: 1;">...</ul>

I think there may be something wrong within my CSS but I do not have any elements created for JPanel Menu but I do have a left and right panel within the body like so:

body {
height: 100%;
max-width: 100%;
min-width: 960px;
min-height: 600px;}

right-panel, .left-panel {
height: 100%;
min-height: 600px;}

.left-panel {
background: url('Images/side-bar-parchment.png') no-repeat fixed center;
background-size: cover;
position: absolute;
width: 170px;
z-index: 1;}

.right-panel {
    margin-left: 170px;
    max-width: 100%;
    z-index: 1;}

Answer 1

write a div in last of html or before html with same id. 1. Jpanelmenu should create it automatically but it does not.

<div id="jPanelMenu-menu"/> this will work.

and might be your html element is not enclosed properly.

Answer 2

Figured it out! I am not exactly sure how it got fixed but I decided to update the jQuery package to 2.0 from 1.8 and now it works! Thank you everyone!