docs: add live example of nested menu (#6977)

Adds a live example for the nested menu functionality.

Fixes #6920.

Author: crisbeto

src/lib/menu/menu.md

@@ -1,6 +1,7 @@
 `<md-menu>` is a floating panel containing list of options.
 
 <!-- example(menu-overview) -->
+<!-- example(nested-menu) -->
 
 By itself, the `<md-menu>` element does not render anything. The menu is attached to and opened
 via application of the `mdMenuTriggerFor` directive:

src/material-examples/example-module.ts

@@ -54,6 +54,7 @@ import {ListOverviewExample} from './list-overview/list-overview-example';
 import {ListSectionsExample} from './list-sections/list-sections-example';
 import {ListSelectionExample} from './list-selection/list-selection-example';
 import {MenuIconsExample} from './menu-icons/menu-icons-example';
+import {NestedMenuExample} from './nested-menu/nested-menu-example';
 import {MenuOverviewExample} from './menu-overview/menu-overview-example';
 import {PaginatorConfigurableExample} from './paginator-configurable/paginator-configurable-example';
 import {PaginatorOverviewExample} from './paginator-overview/paginator-overview-example';
@@ -336,6 +337,12 @@ export const EXAMPLE_COMPONENTS = {
     additionalFiles: null,
     selectorName: null
   },
+  'nested-menu': {
+    title: 'Nested menu',
+    component: NestedMenuExample,
+    additionalFiles: null,
+    selectorName: null
+  },
   'menu-overview': {
     title: 'Basic menu',
     component: MenuOverviewExample,
@@ -584,6 +591,7 @@ export const EXAMPLE_LIST = [
   ListSectionsExample,
   ListSelectionExample,
   MenuIconsExample,
+  NestedMenuExample,
   MenuOverviewExample,
   PaginatorConfigurableExample,
   PaginatorOverviewExample,

src/material-examples/menu-icons/menu-icons-example.ts

@@ -6,5 +6,6 @@ import {Component} from '@angular/core';
 @Component({
   selector: 'menu-icons-example',
   templateUrl: 'menu-icons-example.html',
+  styleUrls: ['menu-icons-example.css'],
 })
 export class MenuIconsExample {}

src/material-examples/menu-overview/menu-overview-example.ts

@@ -6,5 +6,6 @@ import {Component} from '@angular/core';
 @Component({
   selector: 'menu-overview-example',
   templateUrl: 'menu-overview-example.html',
+  styleUrls: ['menu-overview-example.css'],
 })
 export class MenuOverviewExample {}

src/material-examples/nested-menu/nested-menu-example.css

@@ -0,0 +1 @@
+/** No CSS for this example */

src/material-examples/nested-menu/nested-menu-example.html

@@ -0,0 +1,47 @@
+<button md-button [mdMenuTriggerFor]="animals">Animal index</button>
+
+<md-menu #animals="mdMenu">
+  <button md-menu-item [mdMenuTriggerFor]="vertebrates">Vertebrates</button>
+  <button md-menu-item [mdMenuTriggerFor]="invertebrates">Invertebrates</button>
+</md-menu>
+
+<md-menu #vertebrates="mdMenu">
+  <button md-menu-item [mdMenuTriggerFor]="fish">Fishes</button>
+  <button md-menu-item [mdMenuTriggerFor]="amphibians">Amphibians</button>
+  <button md-menu-item [mdMenuTriggerFor]="reptiles">Reptiles</button>
+  <button md-menu-item>Birds</button>
+  <button md-menu-item>Mammals</button>
+</md-menu>
+
+<md-menu #invertebrates="mdMenu">
+  <button md-menu-item>Insects</button>
+  <button md-menu-item>Molluscs</button>
+  <button md-menu-item>Crustaceans</button>
+  <button md-menu-item>Corals</button>
+  <button md-menu-item>Arachnids</button>
+  <button md-menu-item>Velvet worms</button>
+  <button md-menu-item>Horseshoe crabs</button>
+</md-menu>
+
+<md-menu #fish="mdMenu">
+  <button md-menu-item>Baikal oilfish</button>
+  <button md-menu-item>Bala shark</button>
+  <button md-menu-item>Ballan wrasse</button>
+  <button md-menu-item>Bamboo shark</button>
+  <button md-menu-item>Banded killifish</button>
+</md-menu>
+
+<md-menu #amphibians="mdMenu">
+  <button md-menu-item>Sonoran desert toad</button>
+  <button md-menu-item>Western toad</button>
+  <button md-menu-item>Arroyo toad</button>
+  <button md-menu-item>Yosemite toad</button>
+</md-menu>
+
+<md-menu #reptiles="mdMenu">
+  <button md-menu-item>Banded Day Gecko</button>
+  <button md-menu-item>Banded Gila Monster</button>
+  <button md-menu-item>Black Tree Monitor</button>
+  <button md-menu-item>Blue Spiny Lizard</button>
+  <button md-menu-item disabled>Velociraptor</button>
+</md-menu>

src/material-examples/nested-menu/nested-menu-example.ts

@@ -0,0 +1,11 @@
+import {Component} from '@angular/core';
+
+/**
+ * @title Nested menu
+ */
+@Component({
+  selector: 'nested-menu-example',
+  templateUrl: 'nested-menu-example.html',
+  styleUrls: ['nested-menu-example.css']
+})
+export class NestedMenuExample {}