Fix heights of menu sublevels in offcanvas to ensure they parents don't bleed through and that the particles that follow don't get overlapped (fixes #100)

assets/common/application/menu/index.js

@@ -138,7 +138,7 @@ var Menu = new prime({
 
             if (sublevel) {
                 var isNavMenu = target.parent(selectors.mainContainer);
-                if (isNavMenu && !sublevel.hasClass('g-toplevel')) { this._fixHeights(sublevel, slideout, isGoingBack); }
+                this._fixHeights(sublevel, slideout, isGoingBack, isNavMenu);
                 if (!isNavMenu && columns && (blocks = columns.search('> .g-grid > .g-block'))) {
                     if (blocks.length > 1) { sublevel = blocks.search('> .g-sublevel'); }
                 }
@@ -201,19 +201,33 @@ var Menu = new prime({
         this.overlay[0].style.opacity = shouldOpen ? 1 : 0;
     },
 
-    _fixHeights: function(parent, sublevel, isGoingBack) {
+    _fixHeights: function(parent, sublevel, isGoingBack, isNavMenu) {
         if (parent == sublevel) { return; }
         if (isGoingBack) { parent.attribute('style', null); }
 
         var heights = {
-            from: parent[0].getBoundingClientRect(),
-            to: sublevel[0].getBoundingClientRect()
-        };
+                from: parent[0].getBoundingClientRect(),
+                to: (!isNavMenu ? sublevel.parent('.g-dropdown')[0] : sublevel[0]).getBoundingClientRect()
+            },
+            height = Math.max(heights.from.height, heights.to.height);
 
         if (!isGoingBack) {
             // if from height is < than to height set the parent height else, set the target
-            if (heights.from.height < heights.to.height) { parent[0].style.height = Math.max(heights.from.height, heights.to.height) + 'px'; }
-            else { sublevel[0].style.height = Math.max(heights.from.height, heights.to.height) + 'px'; }
+            if (heights.from.height < heights.to.height) { parent[0].style.height = height + 'px'; }
+            else { sublevel[0].style.height = height + 'px'; }
+
+            // fix sublevels heights in side menu (offcanvas etc)
+            if (!isNavMenu) {
+                var maxHeight = height,
+                    block = $(sublevel).parent('.g-block:not(.size-100)'),
+                    column = block ? block.parent('.g-dropdown-column') : null;
+                (sublevel.parents('.g-slide-out, .g-dropdown-column') || parent).forEach(function(slideout) {
+                    maxHeight = Math.max(height, parseInt(slideout.style.height, 10));
+                });
+
+                if (column) { column[0].style.height = maxHeight + 'px'; }
+                sublevel[0].style.height = maxHeight + 'px';
+            }
         }
     },
 

assets/common/js/main.js

@@ -160,7 +160,7 @@ var Menu = new prime({
 
             if (sublevel) {
                 var isNavMenu = target.parent(selectors.mainContainer);
-                if (isNavMenu && !sublevel.hasClass('g-toplevel')) { this._fixHeights(sublevel, slideout, isGoingBack); }
+                this._fixHeights(sublevel, slideout, isGoingBack, isNavMenu);
                 if (!isNavMenu && columns && (blocks = columns.search('> .g-grid > .g-block'))) {
                     if (blocks.length > 1) { sublevel = blocks.search('> .g-sublevel'); }
                 }
@@ -223,19 +223,33 @@ var Menu = new prime({
         this.overlay[0].style.opacity = shouldOpen ? 1 : 0;
     },
 
-    _fixHeights: function(parent, sublevel, isGoingBack) {
+    _fixHeights: function(parent, sublevel, isGoingBack, isNavMenu) {
         if (parent == sublevel) { return; }
         if (isGoingBack) { parent.attribute('style', null); }
 
         var heights = {
-            from: parent[0].getBoundingClientRect(),
-            to: sublevel[0].getBoundingClientRect()
-        };
+                from: parent[0].getBoundingClientRect(),
+                to: (!isNavMenu ? sublevel.parent('.g-dropdown')[0] : sublevel[0]).getBoundingClientRect()
+            },
+            height = Math.max(heights.from.height, heights.to.height);
 
         if (!isGoingBack) {
             // if from height is < than to height set the parent height else, set the target
-            if (heights.from.height < heights.to.height) { parent[0].style.height = Math.max(heights.from.height, heights.to.height) + 'px'; }
-            else { sublevel[0].style.height = Math.max(heights.from.height, heights.to.height) + 'px'; }
+            if (heights.from.height < heights.to.height) { parent[0].style.height = height + 'px'; }
+            else { sublevel[0].style.height = height + 'px'; }
+
+            // fix sublevels heights in side menu (offcanvas etc)
+            if (!isNavMenu) {
+                var maxHeight = height,
+                    block = $(sublevel).parent('.g-block:not(.size-100)'),
+                    column = block ? block.parent('.g-dropdown-column') : null;
+                (sublevel.parents('.g-slide-out, .g-dropdown-column') || parent).forEach(function(slideout) {
+                    maxHeight = Math.max(height, parseInt(slideout.style.height, 10));
+                });
+
+                if (column) { column[0].style.height = maxHeight + 'px'; }
+                sublevel[0].style.height = maxHeight + 'px';
+            }
         }
     },
 

engines/common/nucleus/css-compiled/nucleus.css

@@ -1533,21 +1533,25 @@ th {
   float: none;
   padding: 0;
 }
-/* line 319, engines/common/nucleus/scss/nucleus/_nav.scss */
+/* line 318, engines/common/nucleus/scss/nucleus/_nav.scss */
+#g-mobilemenu-container .g-sublevel {
+  cursor: default;
+}
+/* line 320, engines/common/nucleus/scss/nucleus/_nav.scss */
 #g-mobilemenu-container .g-sublevel li {
   position: static;
 }
-/* line 322, engines/common/nucleus/scss/nucleus/_nav.scss */
+/* line 323, engines/common/nucleus/scss/nucleus/_nav.scss */
 #g-mobilemenu-container .g-sublevel .g-dropdown {
   top: 0;
 }
-/* line 327, engines/common/nucleus/scss/nucleus/_nav.scss */
+/* line 328, engines/common/nucleus/scss/nucleus/_nav.scss */
 #g-mobilemenu-container .g-menu-item-container {
   -webkit-transition: -webkit-transform 0.2s ease-out;
   -moz-transition: -moz-transform 0.2s ease-out;
   transition: transform 0.2s ease-out;
 }
-/* line 334, engines/common/nucleus/scss/nucleus/_nav.scss */
+/* line 335, engines/common/nucleus/scss/nucleus/_nav.scss */
 #g-mobilemenu-container .g-toplevel.g-slide-out > .g-menu-item > .g-menu-item-container, #g-mobilemenu-container .g-toplevel.g-slide-out > .g-go-back > .g-menu-item-container, #g-mobilemenu-container .g-sublevel.g-slide-out > .g-menu-item > .g-menu-item-container, #g-mobilemenu-container .g-sublevel.g-slide-out > .g-go-back > .g-menu-item-container {
   -webkit-transform: translateX(-100%);
   -moz-transform: translateX(-100%);
@@ -1555,18 +1559,18 @@ th {
   -o-transform: translateX(-100%);
   transform: translateX(-100%);
 }
-/* line 341, engines/common/nucleus/scss/nucleus/_nav.scss */
+/* line 342, engines/common/nucleus/scss/nucleus/_nav.scss */
 #g-mobilemenu-container .g-menu-item-subtitle {
   line-height: 1.5;
 }
-/* line 344, engines/common/nucleus/scss/nucleus/_nav.scss */
+/* line 345, engines/common/nucleus/scss/nucleus/_nav.scss */
 #g-mobilemenu-container i {
   float: left;
   line-height: 1.4rem;
   margin-right: 0.3rem;
 }
 
-/* line 351, engines/common/nucleus/scss/nucleus/_nav.scss */
+/* line 352, engines/common/nucleus/scss/nucleus/_nav.scss */
 .g-menu-overlay.g-menu-overlay-open {
   z-index: 2;
   position: fixed;
@@ -1914,4 +1918,6 @@ input[type="submit"] {
   right: 0.7rem;
 }
 
-/*# sourceMappingURL=nucleus.css.map */
+
+
+/*# sourceMappingURL=nucleus.css.map */

engines/common/nucleus/scss/nucleus/_nav.scss

@@ -316,6 +316,7 @@
 	    }							
 	}
 	.g-sublevel {
+        cursor: default;
 		li {
 			position: static;
 		}