angular-material-npfixed/src/components/menu/demoMenuWidth/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="WidthDemoCtrl as ctrl" style="min-height:350px" ng-cloak>
  <div class="menu-demo-container" layout-align="start center" layout="column">
    <div layout-align="start center" layout="column" style="min-height:70px;" >
      <h2 class="md-title">Different Widths</h2>
      <p>
        <code>md-menu-content</code> may specify a <code>width</code> attribute which will follow
        the <a href="ctrl.menuHref" class="md-accent">official spec</a>.
      </p>
    </div>
    <div class="menus" layout-wrap layout="row" layout-fill layout-align="space-between center" style="min-height:100px;">
      <div layout="column" flex="33" flex-sm="100" flex-xs="100" layout-align="center center">
        <p>Wide menu (<code>width=6</code>)</p>
        <md-menu md-offset="0 -7">
          <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:phone"></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)"> <span md-menu-align-target>Option</span> {{item}} </md-button>
            </md-menu-item>
          </md-menu-content>
        </md-menu>
      </div>
      <div layout="column" flex="33" flex-sm="100" flex-xs="100" layout-align="center center">
        <p>Medium menu (<code>width=4</code>)</p>
        <md-menu md-offset="0 -7">
          <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:email"></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="33" flex-sm="100" flex-xs="100" layout-align="center center">
        <p>Small menu (<code>width=2</code>)</p>
        <md-menu md-offset="0 -7">
          <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:chat"></md-icon>
          </md-button>
          <md-menu-content width="2">
            <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>
  </div>
</div>