My two cents..you are inserting jQuery Mobile resources in the wrong order/place. In addition where is jQuery?
Here a working JSFiddle with jQuery Mobile already set up...JSFiddle demo. If you click on the left button the panel will open or close.
In HTML section do as before.
<div data-role="page">
<div data-role="header" data-position="fixed">
<a href="#menu-panel" data-icon="grid" data-iconpos="notext">Cancel</a> <h1>Home</h1>
</div>
<div data-role="panel" id="menu-panel">
<ul data-role="listview">
<li><a href="index.html">Home</a></li>
<li><a href="About.html">About</a></li>
</ul>
</div><!-- /panel -->
</div><!-- /page -->
Now, you should see content enriched correctly (the navigation bar only in this case) and you can manage the panel with
$( '#menu-panel' ).panel( "open" );
or
$( '#menu-panel' ).panel( "close" );