Drop down option menu using onsen UI

Question

I want to develop drop down menu header as available in android navigation toolbar. I am using phonegap & onsen UI Framework to develop mobile application. I can able to load sliding menu from left & right side but right now my requirement is to open drop down if one should press icon display in image.

Same list should be displayed(open) if user press option button from phone device. I am not using jquery or jquery mobile to develop mobile UI. I don't want to develop drop down menu using html5 & css, so I request you please let me know some alternative way to handle it.

Answer 1

You could try using <ons-popover> with an <ons-list> inside.

Create the popover inside a template:

<ons-template id="popover.html>
  <ons-popover direction="down" cancelable>
    <ons-list>
      <ons-list-item modifier="tappable">Option 1</ons-list-item>
      ...
    </ons-list>
  </ons-popover>
</ons-template>

You can show the popover using the following JavaScript code:

ons.createPopover('popover.html').then(function(popover) {
  popover.show();
});

I've created an example that shows how you can use it as a dropdown menu: http://codepen.io/argelius/pen/zxGEza

Answer 2

Did you mean something like that?

DEMO

html

<ons-modal var="modal">
   <ons-list>

        <ons-list-header>Browsers</ons-list-header>

        <ons-list-item modifier="tappable">
          <label class="radio-button radio-button--list-item">
            <input type="radio" name="a" checked="checked">
            <div class="radio-button__checkmark radio-button--list-item__checkmark"></div>
            Chrome
          </label>
        </ons-list-item>

        <ons-list-item modifier="tappable">
          <label class="radio-button radio-button--list-item">
            <input type="radio" name="a">
            <div class="radio-button__checkmark radio-button--list-item__checkmark"></div>
            Safari
          </label>
        </ons-list-item>

        <ons-list-item modifier="tappable">
          <label class="radio-button radio-button--list-item">
            <input type="radio" name="a">
            <div class="radio-button__checkmark radio-button--list-item__checkmark"></div>
            Internet Explorer
          </label>
        </ons-list-item>

        <ons-list-item modifier="tappable">
          <label class="radio-button radio-button--list-item">
            <input type="radio" name="a">
            <div class="radio-button__checkmark radio-button--list-item__checkmark"></div>
            Opera
          </label>
        </ons-list-item>

        <ons-list-item modifier="tappable">
          <label class="radio-button radio-button--list-item">
            <input type="radio" name="a">
            <div class="radio-button__checkmark radio-button--list-item__checkmark"></div>
            Firefox
          </label>
        </ons-list-item>
      </ons-list>
</ons-modal>

<ons-navigator>
  <ons-page id="my-page">
<ons-toolbar>
        <div class="center">Toolbars</div>
        <div class="right">
          <ons-toolbar-button id="show-modal">
            <ons-icon icon="ion-ios7-plus" style="font-size: 32px; width: 1em"> 
          </ons-toolbar-button>
        </div>
      </ons-toolbar>
  </ons-page>
</ons-navigator>

javascript

ons.bootstrap();

$(document.body).on("pageinit", '#my-page', function() {
  $("#show-modal", this).click(function() {
    modal.show();
  });
});