diff --git a/src/components/menu/menu.ios.scss b/src/components/menu/menu.ios.scss
index e2dd7e7714..98b94b89ab 100644
--- a/src/components/menu/menu.ios.scss
+++ b/src/components/menu/menu.ios.scss
@@ -8,7 +8,7 @@ $menu-ios-box-shadow-color: rgba(0, 0, 0, .25) !default;
$menu-ios-box-shadow: 0 0 10px $menu-ios-box-shadow-color !default;
-ion-menu {
+.menu-inner {
background: $menu-ios-background;
}
@@ -20,6 +20,6 @@ ion-menu {
box-shadow: $menu-ios-box-shadow;
}
-ion-menu[type=overlay] {
+ion-menu[type=overlay] .menu-inner {
box-shadow: $menu-ios-box-shadow;
}
diff --git a/src/components/menu/menu.md.scss b/src/components/menu/menu.md.scss
index 4d9a25a93f..f884bb91ae 100644
--- a/src/components/menu/menu.md.scss
+++ b/src/components/menu/menu.md.scss
@@ -8,7 +8,7 @@ $menu-md-box-shadow-color: rgba(0, 0, 0, .25) !default;
$menu-md-box-shadow: 0 0 10px $menu-md-box-shadow-color !default;
-ion-menu {
+.menu-inner {
background: $menu-md-background;
}
@@ -20,6 +20,6 @@ ion-menu {
box-shadow: $menu-md-box-shadow;
}
-ion-menu[type=overlay] {
+ion-menu[type=overlay] .menu-inner {
box-shadow: $menu-md-box-shadow;
}
diff --git a/src/components/menu/menu.scss b/src/components/menu/menu.scss
index da19380e13..b892ba3b1c 100644
--- a/src/components/menu/menu.scss
+++ b/src/components/menu/menu.scss
@@ -8,6 +8,21 @@ $menu-small-width: $menu-width - 40px !default;
ion-menu {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+
+ display: none;
+
+ &.show-menu {
+ display: block;
+ }
+}
+
+
+.menu-inner {
position: absolute;
top: 0;
right: auto;
@@ -23,13 +38,13 @@ ion-menu {
transform: translate3d(-9999px, 0, 0);
}
-ion-menu > ion-header,
-ion-menu > ion-content,
-ion-menu > ion-footer {
+.menu-inner > ion-header,
+.menu-inner > ion-content,
+.menu-inner > ion-footer {
position: relative;
}
-ion-menu[side=right] {
+ion-menu[side=right] > .menu-inner {
right: 0;
left: auto;
}
@@ -37,6 +52,8 @@ ion-menu[side=right] {
ion-menu ion-backdrop {
z-index: -1;
display: none;
+
+ opacity: .1;
}
.menu-content {
@@ -54,7 +71,7 @@ ion-menu ion-backdrop {
@media (max-width: 340px) {
- ion-menu {
+ .menu-inner {
width: $menu-small-width;
}
@@ -66,7 +83,11 @@ ion-menu ion-backdrop {
// The content slides over to reveal the menu underneath.
// The menu itself, which is under the content, does not move.
-ion-menu[type=reveal].show-menu {
+ion-menu[type=reveal] {
+ z-index: 0;
+}
+
+ion-menu[type=reveal].show-menu .menu-inner {
transform: translate3d(0, 0, 0);
}
@@ -79,17 +100,7 @@ ion-menu[type=reveal].show-menu {
ion-menu[type=overlay] {
z-index: $z-index-menu-overlay;
- ion-backdrop {
- left: -3000px;
+ .show-backdrop {
display: block;
-
- width: 6000px;
-
- opacity: .01;
- transform: translate3d(-9999px, 0, 0);
-
- &.show-backdrop {
- transform: translate3d(0, 0, 0);
- }
}
}
diff --git a/src/components/menu/menu.ts b/src/components/menu/menu.ts
index 69214542d9..9d103befd8 100644
--- a/src/components/menu/menu.ts
+++ b/src/components/menu/menu.ts
@@ -181,14 +181,14 @@ import { GestureController } from '../../gestures/gesture-controller';
'role': 'navigation'
},
template: `
-