Implement an amp-mega-menu component (#24822)

* basic mega menu implementation and unit tests * improve accessibility and keyboard support * update based on pr review
ampproject · Oct 16, 2019 · 502aba7 · 502aba7
1 parent 8a150b6
commit 502aba7
Show file tree

Hide file tree

Showing 8 changed files with 801 additions and 5 deletions.
diff --git a/build-system/compile/bundles.config.js b/build-system/compile/bundles.config.js
@@ -710,6 +710,13 @@ exports.extensionBundles = [
     options: {hasCss: true},
     type: TYPES.MISC,
   },
+  {
+    name: 'amp-mega-menu',
+    version: '0.1',
+    latestVersion: '0.1',
+    options: {hasCss: true},
+    type: TYPES.MISC,
+  },
   {
     name: 'amp-megaphone',
     version: '0.1',

diff --git a/build-system/server/routes/list.js b/build-system/server/routes/list.js
@@ -180,7 +180,7 @@ router.get('/ecommerce-nested-menu', function(req, res) {
     'menu': [
       {
         'title': 'Clothing, Shoes, Jewelry \u0026 Watches',
-        'image': 'https://cdn.orvis.com/images/082119_w_new.jpg',
+        'image': 'https://picsum.photos/id/535/367/267',
         'content': [
           {
             'title': 'Clothing, Shoes, Jewelry \u0026 Watches',
@@ -199,7 +199,7 @@ router.get('/ecommerce-nested-menu', function(req, res) {
       },
       {
         'title': 'Movies, Music \u0026 Games',
-        'image': 'http://dvmedia.in/images/media-corner-banner.jpg',
+        'image': 'https://picsum.photos/id/452/367/267',
         'content': [
           {
             'title': 'Movies, Music \u0026 Games',
@@ -218,7 +218,7 @@ router.get('/ecommerce-nested-menu', function(req, res) {
       },
       {
         'title': 'Sports \u0026 Outdoors',
-        'image': 'http://vivaplex.co.za/wp-content/uploads/2015/06/sports.jpg',
+        'image': 'https://picsum.photos/id/469/367/267',
         'content': [
           {
             'title': 'Sports',
@@ -244,8 +244,7 @@ router.get('/ecommerce-nested-menu', function(req, res) {
       },
       {
         'title': 'Home, Garden \u0026 Tools',
-        'image':
-          'https://i.pinimg.com/originals/21/b5/0f/21b50faf0decf0ea59e6030438e03ccc.jpg',
+        'image': 'https://picsum.photos/id/491/367/267',
         'content': [
           {
             'title': 'Home, Garden \u0026 Pets',

diff --git a/extensions/amp-mega-menu/0.1/amp-mega-menu.css b/extensions/amp-mega-menu/0.1/amp-mega-menu.css
@@ -0,0 +1,74 @@
+/**
+ * Copyright 2019 The AMP HTML Authors. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS-IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+amp-mega-menu {
+  z-index: 1000 !important;
+  white-space: nowrap !important;
+}
+
+amp-mega-menu.i-amphtml-layout-size-defined[open] {
+  overflow: visible !important;
+}
+
+amp-mega-menu .i-amphtml-mega-menu-item {
+  display: inline-block !important;
+}
+
+amp-mega-menu .i-amphtml-mega-menu-heading {
+  cursor: pointer !important;
+}
+
+amp-mega-menu .i-amphtml-mega-menu-content {
+  position: absolute !important;
+  left: 0;
+  width: 100vw;
+  opacity: 0 !important;
+  visibility: hidden !important;
+  background: white;
+}
+
+amp-mega-menu .i-amphtml-mega-menu-item[open] > .i-amphtml-mega-menu-content {
+  visibility: visible !important;
+  opacity: 1 !important;
+}
+
+amp-mega-menu .i-amphtml-mega-menu-item:not([open]) .i-amphtml-screen-reader {
+  display: none !important;
+}
+
+.i-amphtml-mega-menu-mask-parent {
+  z-index: 1000 !important;
+  position: relative;
+}
+
+.i-amphtml-mega-menu-mask {
+  position: fixed !important;
+  z-index: -1 !important;
+  visibility: hidden !important;
+  opacity: 0 !important;
+  top: 0 !important;
+  bottom: 0 !important;
+  left: 0 !important;
+  right: 0 !important;
+  background: rgba(0,0,0,0.5);
+  transition: opacity 200ms, visibility 0s 200ms;
+}
+
+.i-amphtml-mega-menu-mask[open] {
+  opacity: 1 !important;
+  visibility: visible !important;
+  transition: opacity 200ms;
+}