How to make Drop down panel in jQuery mobile 1.4.0?

问题

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 ?

<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>

回答1:

You can use popup widget to simulate dropdown menu.

As of jQuery Mobile 1.4, a new attribute data-arrow is added to popup widget. This creates an arrow which can be positioned anywhere in popup.

Arrow:

The popup can display an arrow along one of its edges when it opens if the data-arrow attribute is set. The attribute can take a value of true, false, or a string containing a comma-separated list of edge abbreviations ("l" for left, "t" for top, "r" for right, and "b" for bottom). For example, if you set data-arrow="r,b" then the arrow will only ever appear along the bottom or right edge of the popup. true is the same as "l,t,r,b" and false or "" indicates that the popup should be displayed without an arrow.

HTML

<div data-role="popup" id="popupID" data-arrow="t">
  <!-- content -->
</div>

Add data-rel="popup" to button to call popup.

<a href="#popupID" data-rel="popup">Menu</a>

To modify arrow's size, check this link.

Demo

来源：https://stackoverflow.com/questions/22105359/how-to-make-drop-down-panel-in-jquery-mobile-1-4-0