Как сделать выпадающую панель в jQuery mobile 1.4.0?
В моем мобильном приложении jQuery есть следующая панель. Я хочу, чтобы она была выпадающей, как показано на следующем рисунке, а не скользящей от края страницы. Это можно сделать в мобильном jQuery и как я могу это сделать?
<div data-role="page" id="MainPage" >
<div data-role="panel" id="Mainnavpanel" data-theme="b" data-display="overlay" data- position="right" data-position-fixed="true">
<ul data-role="listview"><li>
<a href="#MainPageheader" data-rel="close" class="ui-btn" >Close</a></li>
<li><a href="Page1.html" class="ui-btn" data-transition="none">Page1</a></li>
<li><a href="Page2.html" class="ui-btn" data-transition="none">Page2</a></li>
<li><a href="Page3.html" class="ui-btn" data-transition="none">Page3</a></li>
</ul>
</div>
<div data-role="header" id="MainPageheader" data-position="fixed" data-tap- toggle="false" data-fullscreen="false">
<a href="#Mainnavpanel" data-role="button" class="ui-btn ui-btn-icon-left ui-btn- icon-notext ui-nodisc-icon ui-icon-bars"></a>
<div> <font size="6px"> Main Page </font></div>
</div>
<div data-role="content" >
//content
</div>
</div>