Dropdown menu options using the onsen user interface

Question

I want to create a menu dropdown available on the Android toolbar. I use phonegap and onsen UI Framework to develop a mobile application. I can load the sliding menu on the left and right sides, but now I have to open the drop-down list if I need to click the icon in the image.

The same list should be displayed (open) if the user presses the select button from a telephone device. I do not use jQuery or jquery mobile to develop a mobile interface. I don't want to develop a dropdown menu using html5 and css, so I ask you, please let me know some alternative way to handle this.

Answer 1

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

Create a popover inside the 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 a popover using the following JavaScript code:

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

I created an example that shows how you can use it as a drop-down 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(); }); });