Add mega menu (#1316)

* Simplify header dropdown menu CSS selectors * Create popup utility class to apply popup global settings styles * Add mega menu settings to header section. Add en locale. Add mega menu liquid as snippet. Add mega menu css * Fix indent * Add info to menu type setting * Remove condition for showing dropdown menus for subcategories with no children * Force zero border-radius and top/bottom border for mega menu container since it's full width * Update 1 translation file * Prevent mega menu shadows from overlapping header by reducing menu content z-index. Clean up unused CSS * Add todo * Show mega menu top border only if header does not have separator line enabled * Remove empty line * Update 16 translation files * Update 3 translation files * Remove mega menu snippet since contents are not being re-used. Add mega menu liquid in header directly instead * Update assets/component-mega-menu.css Co-authored-by: MM <martina.marien@shopify.com> * Rename utility class * Add mega menu content layout and styles (#1338) * Add grid for mega menu content and styles for links * Remove role="list" from ul elements since list is ul elements' default role * Adjust link styles * Set mega menu content max height based on viewport height. Use header bottom position set in JS for calculation * Round position value down instead of up to be more consistent with other instances where --header-bottom-position value is set in JS * Fix spacing * Change level 2 link color to better distinguish from level 3 links * Revert mega menu heading opacity to improve color contrast * Merge branch 'add-mega-menu' of https://github.com/Shopify/dawn into add-mega-menu-content # Conflicts: # snippets/mega-menu.liquid * Add id to mega menu content container (JS will use id to add aria-control attribute to summary element). Add role="list" to ul in mega menu for a11y (when list bullets are removed some assistive technologies may not convey ul as list without explicit role) * Fix typo * Combine css properties for same class * Set mega menu links to display block to ensure bigger touch target * Add some bottom offset to menu max-height to prevent iOS Safari from cutting off bottom of menu * Update link style (remove uppercase) for 2nd level links that have no children * Update L2 link font to bold. Use Liquid to calculate bold font-weight value: "bold" will be +300 relative to default body font-weight, but restricted to max of 1000 * Address feedback. Add explicit role="list" for a11y (when list bullets are removed some assistive technologies may not convey ul as list without explicit role) * Use rem instead of px * Remove redundant css * Update line height to account for body scale * Move JS to set header bottom position CSS variable to its own custom HTML component. This is to ensure this snippet of JS does not run if not needed * Remove usage of --viewport-height since its value may not have been set * Update references (in JS and CSS) to details-disclosure to also account for header-menu which extends details-disclosure * Update logic to set --header-bottom-position-desktop value when menu is toggled, instead of in constructor. This ensures the header is visible when the value is calculated Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> Co-authored-by: MM <martina.marien@shopify.com>
Shopify · Mar 9, 2022 · 94e859a · 94e859a
1 parent 3bce717
commit 94e859a
Show file tree

Hide file tree

Showing 27 changed files with 421 additions and 55 deletions.
diff --git a/assets/base.css b/assets/base.css
@@ -2521,19 +2521,19 @@ details[open] > .header__icon--menu .icon-hamburger {
   transform: scale(1.07);
 }
 
-.js .header__inline-menu details > .header__submenu {
+.js details > .header__submenu {
   opacity: 0;
   transform: translateY(-1.5rem);
 }
 
-.header__inline-menu details[open] > .header__submenu {
+details[open] > .header__submenu {
   animation: animateMenuOpen var(--duration-default) ease;
   animation-fill-mode: forwards;
   z-index: 1;
 }
 
 @media (prefers-reduced-motion) {
-  .header__inline-menu details[open] > .header__submenu {
+  details[open] > .header__submenu {
     opacity: 1;
     transform: translateY(0);
   }
@@ -2620,7 +2620,8 @@ details[open] > .header__menu-item .icon-caret {
     transform var(--duration-default) ease;
 }
 
-.header__submenu.list-menu--disclosure {
+.global-settings-popup,
+.header__submenu.global-settings-popup {
   border-radius: var(--popup-corner-radius);
   border-color: rgba(var(--color-foreground), var(--popup-border-opacity));
   border-style: solid;
@@ -2661,6 +2662,7 @@ details[open] > .header__menu-item .icon-caret {
   position: static;
 }
 
+header-menu > details,
 details-disclosure > details {
   position: relative;
 }
@@ -2863,3 +2865,7 @@ details-disclosure > details {
     }
   }
 }
+
+.font-body-bold {
+  font-weight: var(--font-body-weight-bold);
+}
diff --git a/assets/cart-notification.js b/assets/cart-notification.js
@@ -66,7 +66,7 @@ class CartNotification extends HTMLElement {
   handleBodyClick(evt) {
     const target = evt.target;
     if (target !== this.notification && !target.closest('cart-notification')) {
-      const disclosure = target.closest('details-disclosure');
+      const disclosure = target.closest('details-disclosure, header-menu');
       this.activeElement = disclosure ? disclosure.querySelector('summary') : null;
       this.close();
     }

diff --git a/assets/component-mega-menu.css b/assets/component-mega-menu.css
@@ -0,0 +1,67 @@
+.mega-menu {
+  position: static;
+}
+
+.mega-menu__content {
+  background-color: rgb(var(--color-background));
+  border-left: 0;
+  border-radius: 0;
+  border-right: 0;  
+  left: 0;
+  max-height: calc(100vh - var(--header-bottom-position-desktop, 20rem) - 4rem);
+  overflow-y: auto;
+  padding-bottom: 2.4rem;
+  padding-top: 2.4rem;
+  position: absolute;
+  right: 0;
+  top: 100%;
+  z-index: -1;
+}
+
+.header-wrapper--border-bottom .mega-menu__content {
+  border-top: 0;
+}
+
+.js .mega-menu__content {
+  opacity: 0;
+  transform: translateY(-1.5rem);
+}
+
+.mega-menu[open] .mega-menu__content {
+  animation: animateMenuOpen var(--duration-default) ease;
+  animation-fill-mode: forwards;
+}
+
+@media (prefers-reduced-motion) {
+  .mega-menu[open] .mega-menu__content {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.mega-menu__list {
+  display: grid;
+  gap: 2.4rem 4rem;
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+  list-style: none;
+}
+
+.mega-menu__link {
+  color: rgba(var(--color-foreground), 0.75);
+  display: block;
+  line-height: calc(1 + 0.3 / var(--font-body-scale));
+  padding-bottom: 0.8rem;
+  padding-top: 0.8rem;
+  text-decoration: none;
+  transition: text-decoration var(--duration-short) ease;
+}
+
+.mega-menu__link:hover,
+.mega-menu__link--active {
+  color: rgb(var(--color-foreground));
+  text-decoration: underline;
+}
+
+.mega-menu__link--active:hover {
+  text-decoration-thickness: 0.2rem;
+}
diff --git a/assets/details-disclosure.js b/assets/details-disclosure.js
@@ -31,3 +31,17 @@ class DetailsDisclosure extends HTMLElement {
 }
 
 customElements.define('details-disclosure', DetailsDisclosure);
+
+class HeaderMenu extends DetailsDisclosure {
+  constructor() {
+    super();
+    this.header = document.querySelector('header');
+  }
+
+  onToggle() {
+    if (document.documentElement.style.getPropertyValue('--header-bottom-position-desktop') !== '') return;
+    if (this.header) document.documentElement.style.setProperty('--header-bottom-position-desktop', `${Math.floor(this.header.getBoundingClientRect().bottom)}px`);
+  }
+}
+
+customElements.define('header-menu', HeaderMenu);
diff --git a/layout/theme.liquid b/layout/theme.liquid
@@ -49,6 +49,7 @@
         --font-body-family: {{ settings.type_body_font.family }}, {{ settings.type_body_font.fallback_families }};
         --font-body-style: {{ settings.type_body_font.style }};
         --font-body-weight: {{ settings.type_body_font.weight }};
+        --font-body-weight-bold: {{ settings.type_body_font.weight | plus: 300 | at_most: 1000 }};
 
         --font-heading-family: {{ settings.type_header_font.family }}, {{ settings.type_header_font.fallback_families }};
         --font-heading-style: {{ settings.type_header_font.style }};

diff --git a/locales/cs.schema.json b/locales/cs.schema.json
@@ -722,6 +722,16 @@
         },
         "margin_bottom": {
           "label": "Dolní okraj"
+        },
+        "menu_type_desktop": {
+          "label": "Typ desktopové nabídky",
+          "info": "Typ nabídky se automaticky optimalizuje pro mobilní prostředí.",
+          "options__1": {
+            "label": "Rozevírací nabídka"
+          },
+          "options__2": {
+            "label": "Mega nabídka"
+          }
         }
       }
     },

diff --git a/locales/da.schema.json b/locales/da.schema.json
@@ -722,6 +722,16 @@
         },
         "margin_bottom": {
           "label": "Nederste margen"
+        },
+        "menu_type_desktop": {
+          "label": "Computermenutype",
+          "info": "Menutypen optimeres automatisk til mobil.",
+          "options__1": {
+            "label": "Rullemenu"
+          },
+          "options__2": {
+            "label": "Megamenu"
+          }
         }
       }
     },

diff --git a/locales/de.schema.json b/locales/de.schema.json
@@ -722,6 +722,16 @@
         },
         "margin_bottom": {
           "label": "Unterer Rand"
+        },
+        "menu_type_desktop": {
+          "label": "Desktop-Menütyp",
+          "info": "Der Menütyp wird automatisch für die mobile Nutzung optimiert.",
+          "options__1": {
+            "label": "Dropdown"
+          },
+          "options__2": {
+            "label": "Mega-Menü"
+          }
         }
       }
     },

diff --git a/locales/en.default.schema.json b/locales/en.default.schema.json
@@ -835,6 +835,16 @@
         "menu": {
           "label": "Menu"
         },
+        "menu_type_desktop": {
+          "label": "Desktop menu type",
+          "info": "Menu type is automatically optimized for mobile.",
+          "options__1": {
+            "label": "Dropdown"
+          },
+          "options__2": {
+            "label": "Mega menu"
+          }
+        },
         "show_line_separator": {
           "label": "Show separator line"
         },

diff --git a/locales/es.schema.json b/locales/es.schema.json
@@ -722,6 +722,16 @@
         },
         "margin_bottom": {
           "label": "Margen inferior"
+        },
+        "menu_type_desktop": {
+          "label": "Tipo de menú de escritorio",
+          "info": "El tipo de menú se optimiza automáticamente para celular.",
+          "options__1": {
+            "label": "Desplegable"
+          },
+          "options__2": {
+            "label": "Mega menú"
+          }
         }
       }
     },

diff --git a/locales/fi.schema.json b/locales/fi.schema.json
@@ -722,6 +722,16 @@
         },
         "margin_bottom": {
           "label": "Alareunus"
+        },
+        "menu_type_desktop": {
+          "label": "Pöytäkoneen valikkotyyppi",
+          "info": "Valikkotyyppi optimoidaan automaattisesti mobiililaitteilla.",
+          "options__1": {
+            "label": "Pudotusvalikko"
+          },
+          "options__2": {
+            "label": "Mega-valikko"
+          }
         }
       }
     },

diff --git a/locales/fr.schema.json b/locales/fr.schema.json
@@ -722,6 +722,16 @@
         },
         "margin_bottom": {
           "label": "Marge inférieure"
+        },
+        "menu_type_desktop": {
+          "label": "Type de menu sur ordinateur",
+          "info": "Le type de menu est automatiquement optimisé pour les mobiles.",
+          "options__1": {
+            "label": "Menu déroulant"
+          },
+          "options__2": {
+            "label": "Méga menu"
+          }
         }
       }
     },

diff --git a/locales/it.schema.json b/locales/it.schema.json
@@ -722,6 +722,16 @@
         },
         "margin_bottom": {
           "label": "Margine inferiore"
+        },
+        "menu_type_desktop": {
+          "label": "Tipo menu desktop",
+          "info": "Tipo menu automaticamente ottimizzato per dispositivi mobili.",
+          "options__1": {
+            "label": "Menu a discesa"
+          },
+          "options__2": {
+            "label": "Mega menu"
+          }
         }
       }
     },

diff --git a/locales/ja.schema.json b/locales/ja.schema.json
@@ -722,6 +722,16 @@
         },
         "margin_bottom": {
           "label": "下マージン"
+        },
+        "menu_type_desktop": {
+          "label": "デスクトップのメニュータイプ",
+          "info": "メニュータイプはモバイル用に自動で最適化されます。",
+          "options__1": {
+            "label": "ドロップダウン"
+          },
+          "options__2": {
+            "label": "メガメニュー"
+          }
         }
       }
     },

diff --git a/locales/ko.schema.json b/locales/ko.schema.json
@@ -722,6 +722,16 @@
         },
         "margin_bottom": {
           "label": "하단 마진"
+        },
+        "menu_type_desktop": {
+          "label": "데스크톱 메뉴 유형",
+          "info": "메뉴 유형은 자동으로 모바일에 최적화됩니다.",
+          "options__1": {
+            "label": "드롭다운"
+          },
+          "options__2": {
+            "label": "메가 메뉴"
+          }
         }
       }
     },

diff --git a/locales/nb.schema.json b/locales/nb.schema.json
@@ -722,6 +722,16 @@
         },
         "margin_bottom": {
           "label": "Bunnmarg"
+        },
+        "menu_type_desktop": {
+          "label": "Menytype på datamaskiner",
+          "info": "Menytypen optimaliseres automatisk for mobil.",
+          "options__1": {
+            "label": "Rullegardin"
+          },
+          "options__2": {
+            "label": "Megameny"
+          }
         }
       }
     },

diff --git a/locales/nl.schema.json b/locales/nl.schema.json
@@ -722,6 +722,16 @@
         },
         "margin_bottom": {
           "label": "Ondermarge"
+        },
+        "menu_type_desktop": {
+          "label": "Menutype voor desktop",
+          "info": "Menutype wordt automatisch aangepast voor mobiele apparaten.",
+          "options__1": {
+            "label": "Vervolgkeuzemenu"
+          },
+          "options__2": {
+            "label": "Megamenu"
+          }
         }
       }
     },

diff --git a/locales/pl.schema.json b/locales/pl.schema.json
@@ -722,6 +722,16 @@
         },
         "margin_bottom": {
           "label": "Dolna granica"
+        },
+        "menu_type_desktop": {
+          "label": "Typ menu pulpitu",
+          "info": "Typ menu jest automatycznie optymalizowany pod kątem urządzeń mobilnych.",
+          "options__1": {
+            "label": "Lista rozwijana"
+          },
+          "options__2": {
+            "label": "Mega menu"
+          }
         }
       }
     },

diff --git a/locales/pt-BR.schema.json b/locales/pt-BR.schema.json
@@ -722,6 +722,16 @@
         },
         "margin_bottom": {
           "label": "Margem inferior"
+        },
+        "menu_type_desktop": {
+          "label": "Tipo de menu para desktop",
+          "info": "O tipo de menu é otimizado automaticamente para dispositivos móveis.",
+          "options__1": {
+            "label": "Menu suspenso"
+          },
+          "options__2": {
+            "label": "Megamenu"
+          }
         }
       }
     },