From 2cefe67c776e3c12f9d5a5be70804edb59664b7b Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Tue, 12 Sep 2017 02:21:37 +0200
Subject: [PATCH] docs: add live example of nested menu (#6977)

Adds a live example for the nested menu functionality.

Fixes #6920.
---
 src/lib/menu/menu.md                          |  1 +
 src/material-examples/example-module.ts       |  8 ++++
 .../menu-icons/menu-icons-example.ts          |  1 +
 .../menu-overview/menu-overview-example.ts    |  1 +
 .../nested-menu/nested-menu-example.css       |  1 +
 .../nested-menu/nested-menu-example.html      | 47 +++++++++++++++++++
 .../nested-menu/nested-menu-example.ts        | 11 +++++
 7 files changed, 70 insertions(+)
 create mode 100644 src/material-examples/nested-menu/nested-menu-example.css
 create mode 100644 src/material-examples/nested-menu/nested-menu-example.html
 create mode 100644 src/material-examples/nested-menu/nested-menu-example.ts

diff --git a/src/lib/menu/menu.md b/src/lib/menu/menu.md
index 8a3969a1ed5..70529834470 100644
--- a/src/lib/menu/menu.md
+++ b/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:
diff --git a/src/material-examples/example-module.ts b/src/material-examples/example-module.ts
index 7085e3abfcc..95b9ca85a27 100644
--- a/src/material-examples/example-module.ts
+++ b/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,
diff --git a/src/material-examples/menu-icons/menu-icons-example.ts b/src/material-examples/menu-icons/menu-icons-example.ts
index bf9c15d30ab..6c474a57f53 100644
--- a/src/material-examples/menu-icons/menu-icons-example.ts
+++ b/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 {}
diff --git a/src/material-examples/menu-overview/menu-overview-example.ts b/src/material-examples/menu-overview/menu-overview-example.ts
index 83ee676b317..2858d3e7416 100644
--- a/src/material-examples/menu-overview/menu-overview-example.ts
+++ b/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 {}
diff --git a/src/material-examples/nested-menu/nested-menu-example.css b/src/material-examples/nested-menu/nested-menu-example.css
new file mode 100644
index 00000000000..7432308753e
--- /dev/null
+++ b/src/material-examples/nested-menu/nested-menu-example.css
@@ -0,0 +1 @@
+/** No CSS for this example */
diff --git a/src/material-examples/nested-menu/nested-menu-example.html b/src/material-examples/nested-menu/nested-menu-example.html
new file mode 100644
index 00000000000..bd972629fb5
--- /dev/null
+++ b/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>
diff --git a/src/material-examples/nested-menu/nested-menu-example.ts b/src/material-examples/nested-menu/nested-menu-example.ts
new file mode 100644
index 00000000000..d9d7b81eb31
--- /dev/null
+++ b/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 {}