diff --git a/src/demo-app/menu/menu-demo.html b/src/demo-app/menu/menu-demo.html
index 423b31d086ec..5b7fa0833faf 100644
--- a/src/demo-app/menu/menu-demo.html
+++ b/src/demo-app/menu/menu-demo.html
@@ -62,3 +62,54 @@
+
+
diff --git a/src/lib/menu/README.md b/src/lib/menu/README.md
index b3fe5cef0b6c..842d11be9a01 100644
--- a/src/lib/menu/README.md
+++ b/src/lib/menu/README.md
@@ -1,6 +1,6 @@
# md-menu
-`md-menu` is a list of options that displays when triggered. You can read more about menus in the
+`md-menu` is a list of options that displays when triggered. You can read more about menus in the
[Material Design spec](https://material.google.com/components/menus.html).
### Not yet implemented
@@ -114,8 +114,9 @@ Output:
### Customizing menu position
-By default, the menu will display after and below its trigger. You can change this display position
-using the `x-position` (`before | after`) and `y-position` (`above | below`) attributes.
+By default, the menu will display after and below its trigger. You can change this display position
+using the `x-position` (`before | after`) and `y-position` (`above | below`) attributes. The menu
+can be positioned over the menu button or outside using `overlay-trigger` (`true | false`).
*my-comp.html*
```html
@@ -148,7 +149,8 @@ also adds `aria-hasPopup="true"` to the trigger element.
| --- | --- | --- |
| `x-position` | `before | after` | The horizontal position of the menu in relation to the trigger. Defaults to `after`. |
| `y-position` | `above | below` | The vertical position of the menu in relation to the trigger. Defaults to `below`. |
-
+| `overlay-trigger` | `true | false` | Whether to have the menu show on top of the menu trigger or outside. Defaults to `true`. |
+
### Trigger Programmatic API
**Properties**
diff --git a/src/lib/menu/menu-directive.ts b/src/lib/menu/menu-directive.ts
index d532f3a7b981..1d77df7a7770 100644
--- a/src/lib/menu/menu-directive.ts
+++ b/src/lib/menu/menu-directive.ts
@@ -46,14 +46,18 @@ export class MdMenu implements AfterContentInit, MdMenuPanel, OnDestroy {
positionX: MenuPositionX = 'after';
positionY: MenuPositionY = 'below';
+ overlayTrigger = true;
@ViewChild(TemplateRef) templateRef: TemplateRef;
@ContentChildren(MdMenuItem) items: QueryList;
constructor(@Attribute('x-position') posX: MenuPositionX,
- @Attribute('y-position') posY: MenuPositionY) {
+ @Attribute('y-position') posY: MenuPositionY,
+ @Attribute('overlay-trigger') trigger = true) {
if (posX) { this._setPositionX(posX); }
if (posY) { this._setPositionY(posY); }
+
+ this.overlayTrigger = trigger;
this._setPositionClasses();
}
diff --git a/src/lib/menu/menu-panel.ts b/src/lib/menu/menu-panel.ts
index 0d439cfefe5f..e4af12dd987a 100644
--- a/src/lib/menu/menu-panel.ts
+++ b/src/lib/menu/menu-panel.ts
@@ -4,6 +4,7 @@ import {MenuPositionX, MenuPositionY} from './menu-positions';
export interface MdMenuPanel {
positionX: MenuPositionX;
positionY: MenuPositionY;
+ overlayTrigger: boolean;
templateRef: TemplateRef;
close: EventEmitter;
focusFirstItem: () => void;
diff --git a/src/lib/menu/menu-trigger.ts b/src/lib/menu/menu-trigger.ts
index c0bc3716e2ec..6c3308dc7ff1 100644
--- a/src/lib/menu/menu-trigger.ts
+++ b/src/lib/menu/menu-trigger.ts
@@ -197,12 +197,15 @@ export class MdMenuTrigger implements AfterViewInit, OnDestroy {
*/
private _getPosition(): ConnectedPositionStrategy {
const positionX: HorizontalConnectionPos = this.menu.positionX === 'before' ? 'end' : 'start';
- const positionY: VerticalConnectionPos = this.menu.positionY === 'above' ? 'bottom' : 'top';
-
+ const overlayY: VerticalConnectionPos = this.menu.positionY === 'above' ? 'bottom' : 'top';
+ let originY = overlayY;
+ if (this.menu.overlayTrigger) {
+ originY = overlayY === 'top' ? 'bottom' : 'top';
+ }
return this._overlay.position().connectedTo(
this._element,
- {originX: positionX, originY: positionY},
- {overlayX: positionX, overlayY: positionY}
+ {originX: positionX, originY: originY},
+ {overlayX: positionX, overlayY: overlayY}
);
}
diff --git a/src/lib/menu/menu.spec.ts b/src/lib/menu/menu.spec.ts
index 01a6eb3219e8..228677c43baa 100644
--- a/src/lib/menu/menu.spec.ts
+++ b/src/lib/menu/menu.spec.ts
@@ -195,6 +195,7 @@ class PositionedMenu {
class CustomMenuPanel implements MdMenuPanel {
positionX: MenuPositionX = 'after';
positionY: MenuPositionY = 'below';
+ overlayTrigger: true;
@ViewChild(TemplateRef) templateRef: TemplateRef;
@Output() close = new EventEmitter();
focusFirstItem = () => {};