Md-menu try

In this example below you will see how to do a Md-menu try with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by 1kohei1, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 1kohei1 ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Md-menu try</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdn.rawgit.com/angular/bower-material/v0.10.0/angular-material.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="md-menu-demo menudemoBasicUsage" ng-controller="BasicDemoCtrl as ctrl" ng-app="MyApp">

  <div class="menu-demo-container" layout-align="center center" layout="column">
    <h2 class="md-title">Simple dropdown menu</h2>
    <p>Note that applying the <code>md-menu-origin</code> and <code>md-menu-align-target</code> attributes ensure that the menu elements align</p>
    <md-menu>
      <md-button aria-label="Open phone interactions menu" class="md-icon-button" ng-click="$mdOpenMenu()">
        <md-icon md-menu-origin="" md-svg-icon="call:phone"></md-icon>
      </md-button>
      <md-menu-content width="4">
        <md-menu-item>
          <md-button ng-click="ctrl.redial($event)">
            <md-icon md-svg-icon="call:dialpad" md-menu-align-target=""></md-icon>
            Redial
          </md-button>
        </md-menu-item>
        <md-menu-item>
          <md-button disabled="disabled" ng-click="ctrl.checkVoicemail()">
            <md-icon md-svg-icon="call:voicemail"></md-icon>
            Check voicemail
          </md-button>
        </md-menu-item>
        <md-menu-divider></md-menu-divider>
        <md-menu-item>
          <md-button ng-click="ctrl.toggleNotifications()">
            <md-icon md-svg-icon="social:notifications-{{ctrl.notificationsEnabled ? 'off' : 'on'}}"></md-icon>
            {{ctrl.notificationsEnabled ? 'Disable' : 'Enable' }} notifications
          </md-button>
        </md-menu-item>
      </md-menu-content>
    </md-menu>

    <md-menu>
      <div ng-click="$mdOpenMenu()">SAMPLE</div>
      <md-menu-content width="4">
        <md-menu-item>
          <md-button>Option 1</md-button>
        </md-menu-item>
        <md-menu-item>
          <md-button>Option 2</md-button>
        </md-menu-item>
        <md-menu-item>
          <md-button>Option 3</md-button>
        </md-menu-item>
        <md-menu-item>
          <md-button>Option 4</md-button>
        </md-menu-item>
      </md-menu-content>
    </md-menu>
  </div>
</div>
  <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-messages.min.js'></script>
<script src='https://cdn.rawgit.com/angular/bower-material/v0.10.0/angular-material.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/assets-cache.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/1kohei1/md-menu-try-WvXGGW */
.menudemoBasicUsage .md-menu-demo {
  padding: 24px; }
.menudemoBasicUsage .menu-demo-container {
  min-height: 200px; }


/*Downloaded from https://www.codeseek.co/1kohei1/md-menu-try-WvXGGW */
angular.module('MyApp')
  .config(function($mdIconProvider) {
    $mdIconProvider
      .iconSet("call", 'img/icons/sets/communication-icons.svg', 24)
      .iconSet("social", 'img/icons/sets/social-icons.svg', 24);
  })
  .controller('BasicDemoCtrl', DemoCtrl);

function DemoCtrl($mdDialog) {
  var vm = this;
  vm.notificationsEnabled = true;
  vm.toggleNotifications = function() {
    vm.notificationsEnabled = !vm.notificationsEnabled;
  };

  vm.redial = function(e) {
    $mdDialog.show(
      $mdDialog.alert()
      .title('Suddenly, a redial')
      .content('You just called someone back. They told you the most amazing story that has ever been told. Have a cookie.')
      .ok('That was easy')
    );
  };

  vm.checkVoicemail = function() {
    // This never happens.
  };
}

Comments