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(); };