bigcommerce · mjschock · Feb 28, 2017 · Feb 14, 2017
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,7 @@
 ## Draft
 - Expose `language` object on the checkout page [#910](https://github.com/bigcommerce/stencil/pull/910)
 - Update package.json to disambiguate Stencil and Cornerstone [#943] (https://github.com/bigcommerce/stencil/pull/943)
+- Added support up to 8 levels for category menu depth [#939] (https://github.com/bigcommerce/stencil/pull/939)
 
 ## 1.5.3 (2017-02-23)
 - Show 'Write a Review' link for mobile [#922] (https://github.com/bigcommerce/stencil/pull/922)

diff --git a/assets/js/theme/global/menu.js b/assets/js/theme/global/menu.js
@@ -12,6 +12,7 @@ class Menu {
     constructor($menu) {
         this.$menu = $menu;
         this.$body = $('body');
+        this.hasMaxMenuDisplayDepth = this.$body.find('.navPages-list').hasClass('navPages-list-depth-max');
 
         // Init collapsible
         this.collapsibles = collapsibleFactory('[data-collapsible]', { $context: this.$menu });
@@ -26,9 +27,16 @@ class Menu {
     }
 
     collapseAll() {
+        this.collapsibles.forEach(collapsible => collapsible.close());
         this.collapsibleGroups.forEach(group => group.close());
     }
 
+    collapseNeighbors($neighbors) {
+        const $collapsibles = collapsibleFactory('[data-collapsible]', { $context: $neighbors });
+
+        $collapsibles.forEach($collapsible => $collapsible.close());
+    }
+
     bindEvents() {
         this.$menu.on('click', this.onMenuClick);
         this.$body.on('click', this.onDocumentClick);
@@ -41,6 +49,12 @@ class Menu {
 
     onMenuClick(event) {
         event.stopPropagation();
+
+        if (this.hasMaxMenuDisplayDepth) {
+            const $neighbors = $(event.target).parent().siblings();
+
+            this.collapseNeighbors($neighbors);
+        }
     }
 
     onDocumentClick() {

diff --git a/assets/js/theme/global/mobile-menu-toggle.js b/assets/js/theme/global/mobile-menu-toggle.js
@@ -29,15 +29,18 @@ export class MobileMenuToggle {
     } = {}) {
         this.$body = $('body');
         this.$menu = $(menuSelector);
+        this.$navList = $('.navPages-list.navPages-list-depth-max');
         this.$header = $(headerSelector);
         this.$scrollView = $(scrollViewSelector, this.$menu);
+        this.$subMenus = this.$navList.find('.navPages-action');
         this.$toggle = $toggle;
         this.mediumMediaQueryList = mediaQueryListFactory('medium');
 
         // Auto-bind
         this.onToggleClick = this.onToggleClick.bind(this);
         this.onCartPreviewOpen = this.onCartPreviewOpen.bind(this);
         this.onMediumMediaQueryMatch = this.onMediumMediaQueryMatch.bind(this);
+        this.onSubMenuClick = this.onSubMenuClick.bind(this);
 
         // Listen
         this.bindEvents();
@@ -56,6 +59,7 @@ export class MobileMenuToggle {
     bindEvents() {
         this.$toggle.on('click', this.onToggleClick);
         this.$header.on(CartPreviewEvents.open, this.onCartPreviewOpen);
+        this.$navList.on('click .navPages-action', this.onSubMenuClick);
 
         if (this.mediumMediaQueryList && this.mediumMediaQueryList.addListener) {
             this.mediumMediaQueryList.addListener(this.onMediumMediaQueryMatch);
@@ -92,6 +96,8 @@ export class MobileMenuToggle {
 
         this.$header.addClass('is-open');
         this.$scrollView.scrollTop(0);
+
+        this.resetSubMenus();
     }
 
     hide() {
@@ -106,6 +112,8 @@ export class MobileMenuToggle {
             .attr('aria-hidden', true);
 
         this.$header.removeClass('is-open');
+
+        this.resetSubMenus();
     }
 
     // Private
@@ -128,6 +136,31 @@ export class MobileMenuToggle {
 
         this.hide();
     }
+
+    onSubMenuClick(event) {
+        const $closestAction = $(event.target).closest('.navPages-action');
+        const $parentSiblings = $closestAction.parent().siblings();
+        const $parentAction = $closestAction.closest('.navPage-subMenu-horizontal').siblings('.navPages-action');
+
+        if (this.$subMenus.hasClass('is-open')) {
+            this.$navList.addClass('subMenu-is-open');
+        } else {
+            this.$navList.removeClass('subMenu-is-open');
+        }
+
+        if ($(event.target).hasClass('is-open')) {
+            $parentSiblings.addClass('is-hidden');
+            $parentAction.addClass('is-hidden');
+        } else {
+            $parentSiblings.removeClass('is-hidden');
+            $parentAction.removeClass('is-hidden');
+        }
+    }
+
+    resetSubMenus() {
+        this.$navList.find('.is-hidden').removeClass('is-hidden');
+        this.$navList.removeClass('subMenu-is-open');
+    }
 }
 
 /*

diff --git a/assets/scss/components/stencil/navPages/_navPages.scss b/assets/scss/components/stencil/navPages/_navPages.scss
@@ -89,6 +89,11 @@
     .navPage-subMenu-list {
         @extend %navPage-childList;
 
+        border-left: 0;
+        list-style: none;
+        margin-left: 0;
+        padding-left: 0;
+
         @include breakpoint("medium") {
             @include grid-row();
             border-left: 0;
@@ -113,6 +118,73 @@
     }
 }
 
+.navPages-list-depth-max.subMenu-is-open {
+    .is-hidden {
+        display: none;
+
+        @include breakpoint("medium") {
+            display: inline-block;
+        }
+    }
+
+    .navPages-item-page {
+        display: none;
+
+        @include breakpoint("medium") {
+            display: inline-block;
+        }
+    }
+}
+
+.navPages-action-depth-max.has-subMenu.is-root.is-open {
+    .navPages-action-moreIcon {
+        @include breakpoint("medium") {
+            transform: rotate(0);
+        }
+    }
+}
+
+.navPages-action-depth-max.has-subMenu.is-open {
+    border-bottom: 1px solid $navPages-list--user-borderColor;
+    text-align: center;
+
+    @include breakpoint("medium") {
+        border-bottom: 0;
+        text-align: left;
+    }
+
+    .navPages-action-moreIcon {
+        border: solid 1px $navPages-action-moreIcon-borderColor;
+        border-radius: 4px;
+        float: left;
+        height: 35px;
+        margin-top: -10px;
+        padding: 11.7px; // (33 - 9.6) / 2
+        transform: rotate(90deg);
+        width: 35px;
+
+        @include breakpoint("medium") {
+            @include square(8px);
+            border: 0;
+            border-radius: 0;
+            float: none;
+            margin-top: 0;
+            padding: 0;
+            transform: rotate(-90deg);
+        }
+    }
+
+    svg {
+        height: 9.6px;
+        width: 9.6px;
+
+        @include breakpoint("medium") {
+            height: 100%;
+            width: 100%;
+        }
+    }
+}
+
 .navPages-action {
     color: stencilColor("navPages-color");
     display: block;
@@ -232,6 +304,37 @@
     }
 }
 
+.has-subMenu.is-root + .navPage-subMenu-horizontal {
+    @include breakpoint("medium") {
+        border-left: 0;
+        left: inherit;
+        margin: auto;
+        top: inherit;
+        width: $navPage-subMenu-horizontal-width;
+    }
+}
+
+.navPage-subMenu-horizontal {
+    &.is-open {
+        @include breakpoint("medium") {
+            border-left: 1px solid stencilColor("navPages-subMenu-separatorColor");
+            display: inherit;
+            height: $navPage-subMenu-horizontal-height;
+            margin-left: $navPage-subMenu-horizontal-width;
+            padding: 0 !important; // scss-lint:disable ImportantRule
+            top: 0;
+            width: $navPage-subMenu-horizontal-width + 1;
+        }
+    }
+
+    .navPages-action-moreIcon {
+        @include breakpoint("medium") {
+            display: inline-block;
+            transform: rotate(-90deg);
+        }
+    }
+}
+
 .navPage-subMenu-item {
     @include breakpoint("medium") {
         // scss-lint:disable ImportantRule
@@ -250,6 +353,27 @@
     }
 }
 
+.navPage-subMenu-item-child,
+.navPage-subMenu-item-parent {
+    width: 100%;
+
+    @include breakpoint("medium") {
+        .navPage-subMenu-action {
+            padding-left: spacing("single");
+            padding-right: spacing("single");
+            width: 100%;
+        }
+
+        .navPage-subMenu-action.is-open,
+        .navPage-subMenu-action:hover {
+            background: $navPage-subMenu-item--is-highlighted-background;
+            color: $navPage-subMenu-item--is-highlighted-color;
+            font-weight: 500;
+            opacity: 0.3;
+        }
+    }
+}
+
 .navPage-subMenu-action {
     padding: spacing("half") 0;
 

diff --git a/assets/scss/settings/stencil/navPages/_settings.scss b/assets/scss/settings/stencil/navPages/_settings.scss
@@ -1,9 +1,13 @@
 // =============================================================================
 // NAV PAGES (Settings)
 // =============================================================================
-
-
-$navPages-backgroundColor:                  container("fill", "dark");
-$navPage-borderColor:                       stencilColor("navPages-subMenu-separatorColor");
-$navPage-childList-borderColor:             $navPage-borderColor;
-$navPages-list--user-borderColor:           $navPage-borderColor;
+$navPage-borderColor:                               stencilColor("navPages-subMenu-separatorColor");
+$navPage-childList-borderColor:                     $navPage-borderColor;
+$navPage-subMenu-horizontal-backgroundColor:        stencilColor("navPages-subMenu-backgroundColor");
+$navPage-subMenu-horizontal-height:                 rem-calc(242px);
+$navPage-subMenu-horizontal-width:                  rem-calc(215px);
+$navPage-subMenu-item--is-highlighted-background:   #c8bdb2;
+$navPage-subMenu-item--is-highlighted-color:        #000;
+$navPages-action-moreIcon-borderColor:              #d6cdc0;
+$navPages-backgroundColor:                          container("fill", "dark");
+$navPages-list--user-borderColor:                   $navPage-borderColor;
diff --git a/config.json b/config.json
@@ -250,7 +250,8 @@
     "social_icon_placement_top": false,
     "social_icon_placement_bottom": "bottom_none",
     "show_geotrust_ssl_seal": false,
-    "geotrust_ssl_seal_size": "M"
+    "geotrust_ssl_seal_size": "M",
+    "navigation_design": "simple"
   },
   "read_only_files": [
     "/assets/scss/components/citadel",

diff --git a/schema.json b/schema.json
@@ -625,6 +625,30 @@
         "label": "Background color",
         "id": "header-backgroundColor"
       },
+      {
+        "type": "heading",
+        "content": "Category settings"
+      },
+      {
+        "type": "select",
+        "label": "Navigation design",
+        "id": "navigation_design",
+        "force_reload": true,
+        "options": [
+          {
+            "value": "simple",
+            "label": "Simple (Menu display depth of 3)"
+          },
+          {
+            "value": "alternate",
+            "label": "Alternate (Max menu display depth)"
+          }
+        ]
+      },
+      {
+        "type": "paragraph",
+        "content": "*Maximum menu display depth value is set in category settings within Store Settings."
+      },
       {
         "type": "heading",
         "content": "User navigation"

diff --git a/templates/components/common/navigation-dropdown.html b/templates/components/common/navigation-dropdown.html
@@ -0,0 +1,19 @@
+<div class="navPage-subMenu navPage-subMenu-horizontal" id="navPages-{{id}}" aria-hidden="true" tabindex="-1">
+    <ul class="navPage-subMenu-list">
+        <li class="navPage-subMenu-item-parent">
+            <a class="navPage-subMenu-action navPages-action navPages-action-depth-max" href="{{url}}">{{lang 'category.view_all.name' category=name}}</a>
+        </li>
+        {{#each children}}
+            <li class="navPage-subMenu-item-child">
+                {{#if children}}
+                    <a class="navPage-subMenu-action navPages-action navPages-action-depth-max has-subMenu" href="{{url}}" data-collapsible="navPages-{{id}}">
+                        {{name}} <i class="icon navPages-action-moreIcon" aria-hidden="true"><svg><use xlink:href="#icon-chevron-down" /></svg></i>
+                    </a>
+                    {{> components/common/navigation-dropdown}}
+                {{else}}
+                    <a class="navPage-subMenu-action navPages-action" href="{{url}}">{{name}}</a>
+                {{/if}}
+            </li>
+        {{/each}}
+    </ul>
+</div>
diff --git a/templates/components/common/navigation-list-alternate.html b/templates/components/common/navigation-list-alternate.html
@@ -0,0 +1,8 @@
+{{#if children}}
+    <a class="navPages-action navPages-action-depth-max has-subMenu is-root" href="{{url}}" data-collapsible="navPages-{{id}}">
+        {{name}} <i class="icon navPages-action-moreIcon" aria-hidden="true"><svg><use xlink:href="#icon-chevron-down" /></svg></i>
+    </a>
+    {{> components/common/navigation-dropdown}}
+{{else}}
+    <a class="navPages-action" href="{{url}}">{{name}}</a>
+{{/if}}
diff --git a/templates/components/common/navigation-menu.html b/templates/components/common/navigation-menu.html
@@ -2,15 +2,20 @@
     <div class="navPages-quickSearch">
         {{> components/common/quick-search}}
     </div>
-    <ul class="navPages-list">
+    <ul class="navPages-list{{#if theme_settings.navigation_design '!==' 'simple'}} navPages-list-depth-max{{/if}}">
         {{#each categories}}
             <li class="navPages-item">
+            {{#if ../theme_settings.navigation_design '===' 'simple'}}
                 {{> components/common/navigation-list}}
+            {{/if}}
+            {{#if ../theme_settings.navigation_design '===' 'alternate'}}
+                {{> components/common/navigation-list-alternate}}
+            {{/if}}
             </li>
         {{/each}}
         {{#unless theme_settings.hide_content_navigation}}
             {{#each pages}}
-                 <li class="navPages-item">
+                 <li class="navPages-item navPages-item-page">
                      <a class="navPages-action" href="{{url}}">{{name}}</a>
                  </li>
              {{/each}}