Angular Material Menu Bar
home
Run
screen_rotation
fullscreen
cloud_download
<html lang="en" > <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.1/angular-material.min.css"> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.1/angular-material.min.js"></script> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic"> <script language="javascript"> angular .module('myApp', ['ngMaterial', 'ngMessages']) .controller('MyController', function ($scope, $mdDialog) { //controller code goes here... this.openMenu = function($mdOpenMenu, ev) { originatorEv = ev; $mdOpenMenu(ev); }; }); </script> </head> <body ng-app="myApp"> <div ng-controller="MyController as ctrl" ng-cloak="" > <md-content layout-padding> <md-menu-bar> <md-menu> <button ng-click="ctrl.openMenu($mdOpenMenu, $event)"> File </button> <md-menu-content> <md-menu-item> <md-button> Share... </md-button> </md-menu-item> <md-menu-divider></md-menu-divider> <md-menu-item> <md-menu> <md-button ng-click="$mdOpenMenu()">New</md-button> <md-menu-content> <md-menu-item><md-button>Document</md-button></md-menu-item> <md-menu-item><md-button>Spreadsheet</md-button></md-menu-item> <md-menu-item><md-button>Presentation</md-button></md-menu-item> </md-menu-content> </md-menu> </md-menu-item> <md-menu-item> <md-button ng-click="ctrl.openMenu($mdOpenMenu, $event)"> Open... </md-button> </md-menu-item> <md-menu-item> <md-button> Rename </md-button> </md-menu-item> <md-menu-divider></md-menu-divider> <md-menu-item> <md-button> Print </md-button> </md-menu-item> </md-menu-content> </md-menu> <md-menu> <button ng-click="ctrl.openMenu($mdOpenMenu, $event)"> Edit </button> <md-menu-content> <md-menu-item class="md-indent"> <i class="material-icons">undo</i> <md-button> Undo </md-button> </md-menu-item> <md-menu-divider></md-menu-divider> <md-menu-item class="md-indent"> <i class="material-icons">content_cut</i> <md-button> Cut </md-button> </md-menu-item> <md-menu-item class="md-indent"> <i class="material-icons">content_paste</i> <md-button> Paste </md-button> </md-menu-item> </md-menu-content> </md-menu> <md-menu> <button ng-click="ctrl.openMenu($mdOpenMenu, $event)"> Other Actions </button> <md-menu-content> <md-menu-item> <md-button> Action 1 </md-button> </md-menu-item> <md-menu-divider></md-menu-divider> <md-menu-item> <md-menu> <md-button ng-click="$mdOpenMenu()">Action 2</md-button> <md-menu-content> <md-menu-item><md-button>Item 1</md-button></md-menu-item> <md-menu-item><md-button>Item 2</md-button></md-menu-item> <md-menu-item><md-button>Item 3</md-button></md-menu-item> <md-menu-item><md-button>Item 4</md-button></md-menu-item> </md-menu-content> </md-menu> </md-menu-item> <md-menu-item> <md-button ng-click="ctrl.openMenu($mdOpenMenu, $event)"> Action 3 </md-button> </md-menu-item> <md-menu-item> <md-button> Action 4 </md-button> </md-menu-item> <md-menu-divider></md-menu-divider> <md-menu-item> <md-button> Action 5 </md-button> </md-menu-item> </md-menu-content> </md-menu> </md-menu-bar> </md-content> </div> </body> </html>
<html lang="en" > <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.1/angular-material.min.css"> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.1/angular-material.min.js"></script> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic"> <script language="javascript"> angular .module('myApp', ['ngMaterial', 'ngMessages']) .controller('MyController', function ($scope, $mdDialog) { //controller code goes here... this.openMenu = function($mdOpenMenu, ev) { originatorEv = ev; $mdOpenMenu(ev); }; }); </script> </head> <body ng-app="myApp"> <div ng-controller="MyController as ctrl" ng-cloak="" > <md-content layout-padding> <md-menu-bar> <md-menu> <button ng-click="ctrl.openMenu($mdOpenMenu, $event)"> File </button> <md-menu-content> <md-menu-item> <md-button> Share... </md-button> </md-menu-item> <md-menu-divider></md-menu-divider> <md-menu-item> <md-menu> <md-button ng-click="$mdOpenMenu()">New</md-button> <md-menu-content> <md-menu-item><md-button>Document</md-button></md-menu-item> <md-menu-item><md-button>Spreadsheet</md-button></md-menu-item> <md-menu-item><md-button>Presentation</md-button></md-menu-item> </md-menu-content> </md-menu> </md-menu-item> <md-menu-item> <md-button ng-click="ctrl.openMenu($mdOpenMenu, $event)"> Open... </md-button> </md-menu-item> <md-menu-item> <md-button> Rename </md-button> </md-menu-item> <md-menu-divider></md-menu-divider> <md-menu-item> <md-button> Print </md-button> </md-menu-item> </md-menu-content> </md-menu> <md-menu> <button ng-click="ctrl.openMenu($mdOpenMenu, $event)"> Edit </button> <md-menu-content> <md-menu-item class="md-indent"> <i class="material-icons">undo</i> <md-button> Undo </md-button> </md-menu-item> <md-menu-divider></md-menu-divider> <md-menu-item class="md-indent"> <i class="material-icons">content_cut</i> <md-button> Cut </md-button> </md-menu-item> <md-menu-item class="md-indent"> <i class="material-icons">content_paste</i> <md-button> Paste </md-button> </md-menu-item> </md-menu-content> </md-menu> <md-menu> <button ng-click="ctrl.openMenu($mdOpenMenu, $event)"> Other Actions </button> <md-menu-content> <md-menu-item> <md-button> Action 1 </md-button> </md-menu-item> <md-menu-divider></md-menu-divider> <md-menu-item> <md-menu> <md-button ng-click="$mdOpenMenu()">Action 2</md-button> <md-menu-content> <md-menu-item><md-button>Item 1</md-button></md-menu-item> <md-menu-item><md-button>Item 2</md-button></md-menu-item> <md-menu-item><md-button>Item 3</md-button></md-menu-item> <md-menu-item><md-button>Item 4</md-button></md-menu-item> </md-menu-content> </md-menu> </md-menu-item> <md-menu-item> <md-button ng-click="ctrl.openMenu($mdOpenMenu, $event)"> Action 3 </md-button> </md-menu-item> <md-menu-item> <md-button> Action 4 </md-button> </md-menu-item> <md-menu-divider></md-menu-divider> <md-menu-item> <md-button> Action 5 </md-button> </md-menu-item> </md-menu-content> </md-menu> </md-menu-bar> </md-content> </div> </body> </html>
Copyrights@tutorialsplane.com