From 8e5c979501cbe291036707f4565e96dad2d650be Mon Sep 17 00:00:00 2001 From: Michael Tran Date: Fri, 9 Jun 2017 14:07:20 +1000 Subject: [PATCH 1/2] Made Changes to CSS, utilizing fixed positioning so the menu better supports large site content which requires vertical scrolling. This is from looking at the way pushy.js works. * CSS & SCSS (SASS) * Modified two existing classes so it supports scrolling in the menu if there's too many menu items: * .multilevelpushmenu_wrapper * .multilevelpushmenu_wrapper .levelHolderClass --- demo/jquery.multilevelpushmenu.css | 11 ++++++----- demo/jquery.multilevelpushmenu_brown.css | 11 ++++++----- demo/jquery.multilevelpushmenu_grey.css | 11 ++++++----- demo/jquery.multilevelpushmenu_red.css | 11 ++++++----- jquery.multilevelpushmenu.css | 11 ++++++----- jquery.multilevelpushmenu.min.css | 2 +- jquery.multilevelpushmenu.min.scss | 21 +++++++++++---------- 7 files changed, 42 insertions(+), 36 deletions(-) diff --git a/demo/jquery.multilevelpushmenu.css b/demo/jquery.multilevelpushmenu.css index 2ae1bf4..62b3d10 100644 --- a/demo/jquery.multilevelpushmenu.css +++ b/demo/jquery.multilevelpushmenu.css @@ -1,19 +1,20 @@ .multilevelpushmenu_wrapper { - position: absolute; + position: fixed; overflow: hidden; min-width: 100%; - min-height: 100%; + height: 100%; margin: 0; padding: 0; } .multilevelpushmenu_wrapper .levelHolderClass { - position: absolute; - overflow: hidden; + position: fixed; top: 0; background: #336ca6; width: auto; - min-height: 100%; + height: 100%; + overflow-x: hidden; + overflow-y: auto; font-family: 'Open Sans Condensed', sans-serif; font-size: 1em; zoom: 1; diff --git a/demo/jquery.multilevelpushmenu_brown.css b/demo/jquery.multilevelpushmenu_brown.css index 87b5668..c647055 100644 --- a/demo/jquery.multilevelpushmenu_brown.css +++ b/demo/jquery.multilevelpushmenu_brown.css @@ -1,19 +1,20 @@ .mlpm_w { - position: absolute; + position: fixed; overflow: hidden; min-width: 100%; - min-height: 100%; + height: 100%; margin: 0; padding: 0; } .mlpm_w .levelHolderClass { - position: absolute; - overflow: hidden; + position: fixed; top: 0; background: #926738; width: auto; - min-height: 100%; + height: 100%; + overflow-x: hidden; + overflow-y: auto; font-family: 'Open Sans Condensed', sans-serif; font-size: 1em; zoom: 1; diff --git a/demo/jquery.multilevelpushmenu_grey.css b/demo/jquery.multilevelpushmenu_grey.css index 5195bda..433be2a 100644 --- a/demo/jquery.multilevelpushmenu_grey.css +++ b/demo/jquery.multilevelpushmenu_grey.css @@ -1,19 +1,20 @@ .mlpm_w { - position: absolute; + position: fixed; overflow: hidden; min-width: 100%; - min-height: 100%; + height: 100%; margin: 0; padding: 0; } .mlpm_w .levelHolderClass { - position: absolute; - overflow: hidden; + position: fixed; top: 0; background: #737373; width: auto; - min-height: 100%; + height: 100%; + overflow-x: hidden; + overflow-y: auto; font-family: 'Open Sans Condensed', sans-serif; font-size: 1em; zoom: 1; diff --git a/demo/jquery.multilevelpushmenu_red.css b/demo/jquery.multilevelpushmenu_red.css index 478d10d..fc79e78 100644 --- a/demo/jquery.multilevelpushmenu_red.css +++ b/demo/jquery.multilevelpushmenu_red.css @@ -1,19 +1,20 @@ .mlpm_w { - position: absolute; + position: fixed; overflow: hidden; min-width: 100%; - min-height: 100%; + height: 100%; margin: 0; padding: 0; } .mlpm_w .levelHolderClass { - position: absolute; - overflow: hidden; + position: fixed; top: 0; background: #ce3130; width: auto; - min-height: 100%; + height: 100%; + overflow-x: hidden; + overflow-y: auto; font-family: 'Open Sans Condensed', sans-serif; font-size: 1em; zoom: 1; diff --git a/jquery.multilevelpushmenu.css b/jquery.multilevelpushmenu.css index 2ae1bf4..62b3d10 100644 --- a/jquery.multilevelpushmenu.css +++ b/jquery.multilevelpushmenu.css @@ -1,19 +1,20 @@ .multilevelpushmenu_wrapper { - position: absolute; + position: fixed; overflow: hidden; min-width: 100%; - min-height: 100%; + height: 100%; margin: 0; padding: 0; } .multilevelpushmenu_wrapper .levelHolderClass { - position: absolute; - overflow: hidden; + position: fixed; top: 0; background: #336ca6; width: auto; - min-height: 100%; + height: 100%; + overflow-x: hidden; + overflow-y: auto; font-family: 'Open Sans Condensed', sans-serif; font-size: 1em; zoom: 1; diff --git a/jquery.multilevelpushmenu.min.css b/jquery.multilevelpushmenu.min.css index 0cd8f10..b1be7c4 100644 --- a/jquery.multilevelpushmenu.min.css +++ b/jquery.multilevelpushmenu.min.css @@ -1 +1 @@ -.multilevelpushmenu_wrapper{position:absolute;overflow:hidden;min-width:100%;min-height:100%;margin:0;padding:0}.multilevelpushmenu_wrapper .levelHolderClass{position:absolute;overflow:hidden;top:0;background:#336ca6;width:auto;min-height:100%;font-family:'Open Sans Condensed',sans-serif;font-size:1em;zoom:1}.multilevelpushmenu_wrapper .ltr{margin-left:-100%;left:0;-moz-box-shadow:5px 0 5px -5px #1f4164;-webkit-box-shadow:5px 0 5px -5px #1f4164;box-shadow:5px 0 5px -5px #1f4164;filter:progid:DXImageTransform.Microsoft.Shadow(color=#1f4164, direction=90, strength=2)}.multilevelpushmenu_wrapper .rtl{margin-right:-100%;right:0;-moz-box-shadow:5px 0 5px 5px #1f4164;-webkit-box-shadow:5px 0 5px 5px #1f4164;box-shadow:5px 0 5px 5px #1f4164;filter:progid:DXImageTransform.Microsoft.Shadow(color=#1f4164, direction=270, strength=2)}.multilevelpushmenu_wrapper .multilevelpushmenu_inactive{background:#2e6196}.multilevelpushmenu_wrapper h2{font-size:1.5em;line-height:1em;font-weight:700;color:#1f4164;padding:0 .4em}.multilevelpushmenu_wrapper ul{list-style:none;padding:0;margin:0}.multilevelpushmenu_wrapper li{cursor:pointer;border-top:1px solid #295685;padding:.4em}.multilevelpushmenu_wrapper li:last-child{border-bottom:1px solid #295685}.multilevelpushmenu_wrapper li:hover{background-color:#295685}.multilevelpushmenu_wrapper a{display:block;outline:0;overflow:hidden;font-size:1.5em;line-height:1em;padding:.2em;text-decoration:none;color:#fff}.multilevelpushmenu_wrapper a:hover{color:#ffe}.multilevelpushmenu_wrapper .backItemClass{display:block;padding:.4em;background:#2e6196;border-top:1px solid #295685}.multilevelpushmenu_wrapper .floatRight{float:right}.multilevelpushmenu_wrapper .floatLeft{float:left}.multilevelpushmenu_wrapper .cursorPointer{cursor:pointer}.multilevelpushmenu_wrapper .iconSpacing_ltr{padding:0 .4em 0 0}.multilevelpushmenu_wrapper .iconSpacing_rtl{padding:0 0 0 .4em} \ No newline at end of file +.multilevelpushmenu_wrapper{position:fixed;overflow:hidden;min-width:100%;height:100%;margin:0;padding:0}.multilevelpushmenu_wrapper .levelHolderClass{position:fixed;top:0;background:#336ca6;width:auto;height:100%;overflow-x:hidden;overflow-y:auto;font-family:'Open Sans Condensed',sans-serif;font-size:1em;zoom:1}.multilevelpushmenu_wrapper .ltr{margin-left:-100%;left:0;-moz-box-shadow:5px 0 5px -5px #1f4164;-webkit-box-shadow:5px 0 5px -5px #1f4164;box-shadow:5px 0 5px -5px #1f4164;filter:progid:DXImageTransform.Microsoft.Shadow(color=#1f4164, direction=90, strength=2)}.multilevelpushmenu_wrapper .rtl{margin-right:-100%;right:0;-moz-box-shadow:5px 0 5px 5px #1f4164;-webkit-box-shadow:5px 0 5px 5px #1f4164;box-shadow:5px 0 5px 5px #1f4164;filter:progid:DXImageTransform.Microsoft.Shadow(color=#1f4164, direction=270, strength=2)}.multilevelpushmenu_wrapper .multilevelpushmenu_inactive{background:#2e6196}.multilevelpushmenu_wrapper h2{font-size:1.5em;line-height:1em;font-weight:700;color:#1f4164;padding:0 .4em}.multilevelpushmenu_wrapper ul{list-style:none;padding:0;margin:0}.multilevelpushmenu_wrapper li{cursor:pointer;border-top:1px solid #295685;padding:.4em}.multilevelpushmenu_wrapper li:last-child{border-bottom:1px solid #295685}.multilevelpushmenu_wrapper li:hover{background-color:#295685}.multilevelpushmenu_wrapper a{display:block;outline:0;overflow:hidden;font-size:1.5em;line-height:1em;padding:.2em;text-decoration:none;color:#fff}.multilevelpushmenu_wrapper a:hover{color:#ffe}.multilevelpushmenu_wrapper .backItemClass{display:block;padding:.4em;background:#2e6196;border-top:1px solid #295685}.multilevelpushmenu_wrapper .floatRight{float:right}.multilevelpushmenu_wrapper .floatLeft{float:left}.multilevelpushmenu_wrapper .cursorPointer{cursor:pointer}.multilevelpushmenu_wrapper .iconSpacing_ltr{padding:0 .4em 0 0}.multilevelpushmenu_wrapper .iconSpacing_rtl{padding:0 0 0 .4em} \ No newline at end of file diff --git a/jquery.multilevelpushmenu.min.scss b/jquery.multilevelpushmenu.min.scss index a7d58d1..dac93c3 100644 --- a/jquery.multilevelpushmenu.min.scss +++ b/jquery.multilevelpushmenu.min.scss @@ -1,11 +1,11 @@ $borderColor:#295685; .multilevelpushmenu_wrapper { margin: 0; - min-height: 100%; + height: 100%; min-width: 100%; overflow: hidden; padding: 0; - position: absolute; + position: fixed; .backItemClass { background: #2e6196; border-top: 1px solid #{$borderColor}; @@ -28,14 +28,15 @@ $borderColor:#295685; padding: 0 0 0 .4em; } .levelHolderClass { - background: #336ca6; - font-family: 'Open Sans Condensed', sans-serif; - font-size: 1em; - min-height: 100%; - overflow: hidden; - position: absolute; - top: 0; - width: auto; + position: fixed; + background: #336ca6; + font-family: 'Open Sans Condensed', sans-serif; + font-size: 1em; + min-height: 100%; + overflow-x: hidden; + overflow-y: auto; + top: 0; + width: auto; zoom: 1; } .ltr { From 9bc60c54056af041cd2e651db9ff4a2d22821020 Mon Sep 17 00:00:00 2001 From: Michael Tran Date: Thu, 15 Jun 2017 09:15:29 +1000 Subject: [PATCH 2/2] - Fixed an issue with RTL collapsing --- demo/jquery.multilevelpushmenu.min.js | 2 +- jquery.multilevelpushmenu.js | 5 +++-- jquery.multilevelpushmenu.min.js | 2 +- 3 files changed, 5 insertions(+), 4 deletions(-) diff --git a/demo/jquery.multilevelpushmenu.min.js b/demo/jquery.multilevelpushmenu.min.js index 6a7ca3f..7372ccb 100644 --- a/demo/jquery.multilevelpushmenu.min.js +++ b/demo/jquery.multilevelpushmenu.min.js @@ -1 +1 @@ -!function(t){t.fn.multilevelpushmenu=function(e){"use strict";var i=arguments,n=null;return this.each(function(){function s(t){t.stopPropagation&&t.preventDefault?(t.stopPropagation(),t.preventDefault()):(t.cancelBubble=!0,t.returnValue=!1)}function a(e,i){return void 0!=e&&void 0!=i&&void e.on(i,function(n,s){e.hide();try{if(!n.pageX||!n.pageY)return!1;s=s||{pageX:n.pageX,pageY:n.pageY};var a=document.elementFromPoint(s.pageX,s.pageY);a=3==a.nodeType?a.parentNode:a,t(a).trigger(i,s)}catch(e){t.error("Error while propagating event: "+e.message)}finally{e.show()}})}function r(){var e=t("