jQuery slide panel

jQuery slide panel

I have a hidden menu, which is:

  1. <div data-role="panel"  id="menupanel" class="menu" data-display="push">
  2.     <ul data-role="listview" data-inset="true" data-theme="b" class="leftmenu">
  3.       <li data-role="list-divider" class="ui-bar-b">{{locale.Program}}</li>
  4.       <li data-icon="false"> <a href="#home" class="ui-state-persist">{{locale.Home}}</a> </li>
  5.       <li data-icon="false"> <a href="#about" class="ui-state-persist" >{{locale.About}}</a> </li>
  6.       <li data-icon="false"> <a href="#myContacts" class="activelink">{{locale.Contacts}}</a> </li>
  7.       <li data-role="list-divider" class="ui-bar-b">{{locale.Application}}</li>
  8.       <li data-icon="false"> <a href="#settings" class="ui-state-persist">{{locale.Settings}}</a> </li>
  9.       
  10.     </ul>
  11.   </div>
Which is called out by pressing a button in my header:

<div id="header" data-role="header" data-position="fixed" data-theme="a" class="pageHeader">
<h1 class="ui-title-long page-title">{{title}}</h1>
        <a href="#menupanel" data-role="none" class="header-btn-menu ui-btn-left">{{locale.Menu}}</a>
<div>

Problems:

1) Content and header flow away. For a second they place where they should be, but next second they flow away ( if i mannually add margin-left:-200px; they show up but this breaks all the effect ).

2) Footer doesn't move.

Menu hidden:



Menu opened: