angular-material-npfixed/src/components/menu/demoMenuPositionModes/index.html

The Angular Material project is an implementation of Material Design in Angular.js. This project provides a set of reusable, well-tested, and accessible Material Design UI components. Angular Material is supported internally at Google by the Angular.js, M

<div class="md-menu-demo" ng-controller="PositionDemoCtrl as ctrl" ng-cloak style="min-height:350px;">
  <div class="menu-demo-container" layout-align="start center" layout="column" >
    <div layout-align="start center" layout="column" style="min-height:150px;" >
      <h2 class="md-title">Position Mode Demos</h2>
      <p>The <code>md-position-mode</code> attribute can be used to specify the positioning along the <code>x</code> and <code>y</code> axis.</p>
    </div>
    <div class="menus"  layout-wrap layout="row" layout-fill layout-align="space-between center" style="min-height:200px;">
      <div layout="column" flex-xs="100" flex-sm="100" flex="33" layout-align="center center">
        <p>Target Mode Positioning (default)</p>
        <md-menu>
          <md-button aria-label="Open demo menu" class="md-icon-button" ng-click="$mdMenu.open($event)">
            <md-icon md-menu-origin md-svg-icon="call:business"></md-icon>
          </md-button>
          <md-menu-content width="6">
            <md-menu-item ng-repeat="item in [1, 2, 3]">
              <md-button ng-click="ctrl.announceClick($index)">
                <md-icon md-menu-align-target md-svg-icon="call:no-sim"></md-icon>
                Option {{item}}
              </md-button>
            </md-menu-item>
          </md-menu-content>
        </md-menu>
      </div>
      <div layout="column" flex-xs="100" flex-sm="100" flex="33" layout-align="center center">
        <p>Target mode with <code>md-offset</code></p>
        <md-menu md-offset="0 -5">
          <md-button aria-label="Open demo menu" class="md-icon-button" ng-click="ctrl.openMenu($mdMenu, $event)">
            <md-icon md-menu-origin md-svg-icon="call:ring-volume"></md-icon>
          </md-button>
          <md-menu-content width="4">
            <md-menu-item ng-repeat="item in [1, 2, 3]">
              <md-button ng-click="ctrl.announceClick($index)"> <span md-menu-align-target>Option</span> {{item}} </md-button>
            </md-menu-item>
          </md-menu-content>
        </md-menu>
      </div>
      <div layout="column" flex-xs="100" flex-sm="100" flex="33" layout-align="center center">
        <p><code>md-position-mode="target-right target"</code></p>
        <md-menu md-position-mode="target-right target" >
          <md-button aria-label="Open demo menu" class="md-icon-button" ng-click="$mdMenu.open($event)">
            <md-icon md-menu-origin md-svg-icon="call:portable-wifi-off"></md-icon>
          </md-button>
          <md-menu-content width="4" >
            <md-menu-item ng-repeat="item in [1, 2, 3]">
              <md-button ng-click="ctrl.announceClick($index)">
                  <div layout="row" flex>
                    <p flex>Option {{item}}</p>
                    <md-icon md-menu-align-target md-svg-icon="call:portable-wifi-off" style="margin: auto 3px auto 0;"></md-icon>
                  </div>
              </md-button>
            </md-menu-item>
          </md-menu-content>
        </md-menu>
      </div>
    </div>
    </div>
  </div>
</div>