6

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.

jalpa
  • 204
  • 1
  • 3
  • 15

2 Answers2

9

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

Andreas Argelius
  • 3,604
  • 1
  • 13
  • 22
3

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();
  });
});
bhdrk
  • 3,415
  • 26
  • 20
  • Your got my requirement but instead of modal box, it should be smooth menu display appended below to (+) icon at right. Like this http://demo.ourtuts.com/menu/ – jalpa Nov 25 '14 at 12:20
  • There is an simple but dirty way :) I updated the demo. Please see that. – bhdrk Nov 25 '14 at 13:24
  • Actually I advise you ionicframework. its css framework is simple than onsenui. – bhdrk Nov 25 '14 at 13:29
  • 1
    There is a new component in version 1.2, which may be what you are looking for, called popover: http://onsen.io/guide/components.html#ons-popover – Guillermo Gutiérrez Nov 25 '14 at 13:48