Notice: The Monaca & Onsen UI Community Forum is shutting down.
For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.
Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.
Submenu on toolbar
-
I’m trying to create a option like this on toolbar:
Another example:
Is there a CSS or JavaScript component I can use to achieve this function? or should I create this with custom html and css coding?
-
The closest component is probably
ons-popover
.
https://onsen.io/v2/api/js/ons-popover.htmlTwo differences from your screenshots:
- By default, it has an arrow pointing out the side but you can easily hide that with CSS.
- The popover appears below the button, not on top of it. Again you can move this with CSS.
Here is an example similar to your screenshots using
ons-popover
:
https://codepen.io/emccorson/pen/gObyrYmHTML:
<ons-page> <ons-toolbar> <div class="right"> <ons-toolbar-button icon="ion-md-more" onclick="showPopover(this)"></ons-toolbar-button> </div> </ons-toolbar> </ons-page> <ons-popover id="popover" direction="down" cancelable="true"> <ons-list> <ons-list-item>one</ons-list-item> <ons-list-item>two</ons-list-item> <ons-list-item>three</ons-list-item> </ons-list> </ons-popover>
JS:
var showPopover = function(target) { document .getElementById('popover') .show(target); }; var hidePopover = function() { document .getElementById('popover') .hide(); };