ドロップダウンメニューをOnsen UIで実装することはできますか?


ドロップダウンメニューをOnsen UIで実装することはできますか?




「ons-popover」というコンポーネントを使用するとできるようです。  
<http://ja.onsen.io/guide/components.html#ons-popover>

実装例は英語版の回答者の方が記載している下記リンク先が分かりやすいです。  
<http://codepen.io/argelius/pen/zxGEza>

上記リンクを参考にした方が良いですが、公式のサンプルから一部抜粋してみました。  
※リスト部分は英語版の回答からお借りしました。  
**HTML**

[code]

    <div ng-controller="AppController" class="page">
      <div class="navigation-bar">
        <span id="navigation" ng-click="show('#navigation')" class="toolbar-button--outline navigation-bar__line-height">
          <i class="ion-navicon" style="font-size:32px; vertical-align:-6px;"></i>
        </span>
      </div>
    </div>
    
    <ons-template id="popover.html">
      <ons-popover direction="down" cancelable>
        <ons-list>
          <ons-list-item modifier="tappable">Menu 1</ons-list-item>
          <ons-list-item modifier="tappable">Menu 2</ons-list-item>
          <ons-list-item modifier="tappable">Menu 3</ons-list-item>
        </ons-list>
      </ons-popover>
    </ons-template>
    
[/code]

**JavaScript**

[code]

    var module = ons.bootstrap();
    module.controller('AppController', function($scope) {
      ons.createPopover('popover.html').then(function(popover) {
        $scope.popover = popover;
      });
    
      $scope.show = function(e) {
        $scope.popover.show(e);
      };
    });
    
[/code]




「ons-popover」というコンポーネントを使用するとできるようです。  
<http://ja.onsen.io/guide/components.html#ons-popover>

実装例は英語版の回答者の方が記載している下記リンク先が分かりやすいです。  
<http://codepen.io/argelius/pen/zxGEza>

上記リンクを参考にした方が良いですが、公式のサンプルから一部抜粋してみました。  
※リスト部分は英語版の回答からお借りしました。  
**HTML**

[code]

    <div ng-controller="AppController" class="page">
      <div class="navigation-bar">
        <span id="navigation" ng-click="show('#navigation')" class="toolbar-button--outline navigation-bar__line-height">
          <i class="ion-navicon" style="font-size:32px; vertical-align:-6px;"></i>
        </span>
      </div>
    </div>
    
    <ons-template id="popover.html">
      <ons-popover direction="down" cancelable>
        <ons-list>
          <ons-list-item modifier="tappable">Menu 1</ons-list-item>
          <ons-list-item modifier="tappable">Menu 2</ons-list-item>
          <ons-list-item modifier="tappable">Menu 3</ons-list-item>
        </ons-list>
      </ons-popover>
    </ons-template>
    
[/code]

**JavaScript**

[code]

    var module = ons.bootstrap();
    module.controller('AppController', function($scope) {
      ons.createPopover('popover.html').then(function(popover) {
        $scope.popover = popover;
      });
    
      $scope.show = function(e) {
        $scope.popover.show(e);
      };
    });
    
[/code]

