Angular Material - Menu Bar

The md-menu-bar an Angular directive, is a container component to hold multiple menus. Menu bar helps to create a operating system provided menu effect.

Example

The following example shows the use of md-menu-bar directive and also the uses of menu-bar.

am_menubar.htm

Live Demo 
<html lang = "en">
   <head>
      <link rel = "stylesheet"
         href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
      <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      
      <script language = "javascript">
         angular
            .module('firstApplication', ['ngMaterial'])
            .controller('menubarController', menubarController);

         function menubarController ($scope, $mdDialog) {
            this.sampleAction = function(name, ev) {
               $mdDialog.show($mdDialog.alert()
                  .title(name)   
                  .textContent('Start learning "' + name + '!')
                  .ok('OK')
                  .targetEvent(ev)
               );
            };
         }                 
      </script>      
   </head>
   
   <body ng-app = "firstApplication"> 
      <div id = "menubarContainer" ng-controller = "menubarController as ctrl"
         layout = "row" ng-cloak>
         <md-toolbar class = "md-menu-toolbar">
            <div layout = "row">
               <div>
                  <h2 class = "md-toolbar-tools">Learn @TutorialsPoint</h2>
                  <md-menu-bar>
                     <md-menu>
                        <button ng-click = "$mdOpenMenu()">Tutorials</button>
                        <md-menu-content>
                           
                           <md-menu-item>
                              <md-button ng-click = "ctrl.sampleAction('share', $event)">Share...</md-button>
                           </md-menu-item>
                           
                           <md-menu-divider></md-menu-divider>
                           <md-menu-item>
                              <md-menu>
                                 <md-button
                                    ng-click = "$mdOpenMenu()">Learn</md-button>
                                 <md-menu-content>
                                    <md-menu-item>
                                       <md-button
                                       ng-click = "ctrl.sampleAction('HTML5', $event)">
                                       HTML5</md-button>
                                    </md-menu-item>
                                    
                                    <md-menu-item>
                                       <md-button
                                          ng-click = "ctrl.sampleAction('jQuery', $event)">
                                          jQuery</md-button>
                                    </md-menu-item>
                                    
                                    <md-menu-item>
                                       <md-button
                                          ng-click = "ctrl.sampleAction('AngularJS', $event)">
                                          AngularJS</md-button>
                                    </md-menu-item>
                                    
                                    <md-menu-item>
                                       <md-button disabled = "disabled"
                                          ng-click = "ctrl.sampleAction('AngularJS 2.0', $event)">
                                          AngularJS 2.0</md-button>
                                    </md-menu-item>
                                    
                                    <md-menu-divider></md-menu-divider>
                                    <md-menu-item>
                                       <md-button
                                          ng-click = "ctrl.sampleAction('CSS', $event)">
                                          CSS</md-button>
                                    </md-menu-item>
                                 </md-menu-content>
                              </md-menu>
                           </md-menu-item>
                           
                        </md-menu-content>
                     </md-menu>
                  </md-menu-bar>
               </div>
            </div>
         </md-toolbar>	 		 
      </div>
   </body>
</html>

Result

Verify the result.

angular_material_widgets.htm
Advertisements