Monaca Onsen UI Discord Chat Github Repo

Submenu on toolbar



  • I’m trying to create a option like this on toolbar:

    0_1580062013758_2020-01-27 02_03_22-Screenshot_20200127-015027_Daily Stoic Exercises.jpg (JPEG Image, 720 × 1520 pix.png

    0_1580062025481_2020-01-27 02_04_35-Screenshot_20200127-015030_Daily Stoic Exercises.jpg (JPEG Image, 720 × 1520 pix.png

    Another example:

    0_1580062044693_2020-01-27 02_00_46-Screenshot_20200127-015015_Make Money Online.jpg (JPEG Image, 720 × 1520 pixels).png

    0_1580062052837_2020-01-27 02_02_49-Screenshot_20200127-015008_Make Money Online.jpg (JPEG Image, 720 × 1520 pixels).png

    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?


  • administrators

    The closest component is probably ons-popover.
    https://onsen.io/v2/api/js/ons-popover.html

    Two differences from your screenshots:

    1. By default, it has an arrow pointing out the side but you can easily hide that with CSS.
    2. 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/gObyrYm

    HTML:

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