title: How to make Drop down panel in jQuery mobile 1.4.0?
body: <p>I have the following Panel in my jQuery mobile app , I want to make it to be drop down  as appears in the following image rather than to be slide from the page edge . Is this can be done in jQuery mobile and  How can i do this  ? </p>
  
  <pre><code>&lt;div data-role="page"    id="MainPage"  &gt;
  
    &lt;div data-role="panel" id="Mainnavpanel" data-theme="b" data-display="overlay" data-      position="right" data-position-fixed="true"&gt;
  
     &lt;ul data-role="listview"&gt;&lt;li&gt;
     &lt;a href="#MainPageheader" data-rel="close" class="ui-btn" &gt;Close&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href="Page1.html" class="ui-btn"  data-transition="none"&gt;Page1&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="Page2.html" class="ui-btn"  data-transition="none"&gt;Page2&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="Page3.html" class="ui-btn"  data-transition="none"&gt;Page3&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
    &lt;/div&gt;
  
     &lt;div  data-role="header"   id="MainPageheader"  data-position="fixed"  data-tap-     toggle="false" data-fullscreen="false"&gt;
  
      &lt;a href="#Mainnavpanel" data-role="button"  class="ui-btn ui-btn-icon-left ui-btn- icon-notext ui-nodisc-icon ui-icon-bars"&gt;&lt;/a&gt;
      &lt;div&gt; &lt;font size="6px"&gt; Main Page &lt;/font&gt;&lt;/div&gt;
  
      &lt;/div&gt; 
      &lt;div data-role="content" &gt;
  
      //content
      &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/9MdaV.png" alt="enter image description here"></p>