diff --git a/README.md b/README.md index 98f2b7c..1351109 100644 --- a/README.md +++ b/README.md @@ -86,11 +86,11 @@ meanExpandableChildren: true meanExpand: "+" -- single character you want to represent the expand for ULs +- single character you want to represent the expand for ULs. Can also be html icon, eg: '' meanContract: "-" -- single character you want to represent the contract for ULs +- single character you want to represent the contract for ULs. Can also be html icon, eg: '' meanRemoveAttrs: false - true to remove classes and IDs, false to keep them @@ -106,3 +106,9 @@ removeElements: "" meanDisplay: "block" - by default this is block, sometimes you may want to switch this to table or table-cell or inline-block etc. so now you can. + +parentClickExpands: true + +- by default this is true, it allows sub-menu expansion by clicking the whole parent link instead of right-autogenerated button only. + +![](parent_expands.gif) \ No newline at end of file diff --git a/demo.html b/demo.html index 369ddd0..b0e3c4e 100644 --- a/demo.html +++ b/demo.html @@ -1,10 +1,10 @@ - - - -MeanMenu Demo - + - - - - - + + - + -
- -
+ + -
-
-

Resize your browser to under 480 pixels

-

Check out our WordPress & Ghost Themes

-
-
+
+
+

Resize your browser to under 480 pixels

+

Check out our WordPress + & Ghost Themes

+
+
- - - + + + - + diff --git a/jquery.meanmenu.js b/jquery.meanmenu.js index 70a49f1..4802d57 100644 --- a/jquery.meanmenu.js +++ b/jquery.meanmenu.js @@ -45,7 +45,8 @@ meanRemoveAttrs: false, // true to remove classes and IDs, false to keep them onePage: false, // set to true for one page sites meanDisplay: "block", // override display method for table cell based layouts e.g. table-cell - removeElements: "" // set to hide page elements + removeElements: "", // set to hide page elements + parentClickExpands: true // set true to expand on the menu link directly }; options = $.extend(defaults, options); @@ -72,8 +73,9 @@ var onePage = options.onePage; var meanDisplay = options.meanDisplay; var removeElements = options.removeElements; + var parentClickExpands = options.parentClickExpands; - //detect known mobile/tablet usage + // detect known mobile/tablet usage var isMobile = false; if ( (navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i)) || (navigator.userAgent.match(/Android/i)) || (navigator.userAgent.match(/Blackberry/i)) || (navigator.userAgent.match(/Windows Phone/i)) ) { isMobile = true; @@ -183,17 +185,30 @@ // allow expandable sub nav(s) if(meanExpandableChildren){ jQuery('.mean-nav ul ul').each(function() { - if(jQuery(this).children().length){ - jQuery(this,'li:first').parent().append(''+ meanExpand +''); + if (jQuery(this).children().length){ + let parent = jQuery(this,'li:first').parent(); + parent.append(''+ meanExpand +''); + + // allows that parent click trigger the sub-menu expansion + if (parentClickExpands === true) { + parent.children('a').first().addClass('mean-expand-cpy'); + } } }); + jQuery('.mean-expand-cpy').on("click",function(e){ + e.preventDefault(); + + let parent = jQuery(this).parent(); + parent.children('.mean-expand').trigger("click"); + }); jQuery('.mean-expand').on("click",function(e){ e.preventDefault(); - if (jQuery(this).hasClass("mean-clicked")) { - jQuery(this).text(meanExpand); + + if (jQuery(this).hasClass("mean-clicked")) { + jQuery(this).html(meanExpand); jQuery(this).prev('ul').slideUp(300, function(){}); } else { - jQuery(this).text(meanContract); + jQuery(this).html(meanContract); jQuery(this).prev('ul').slideDown(300, function(){}); } jQuery(this).toggleClass("mean-clicked"); diff --git a/jquery.meanmenu.min.js b/jquery.meanmenu.min.js index f684a5c..04ee237 100644 --- a/jquery.meanmenu.min.js +++ b/jquery.meanmenu.min.js @@ -1 +1 @@ -!function($){"use strict";$.fn.meanmenu=function(e){var n={meanMenuTarget:jQuery(this),meanMenuContainer:"body",meanMenuClose:"X",meanMenuCloseSize:"18px",meanMenuOpen:"",meanRevealPosition:"right",meanRevealPositionDistance:"0",meanRevealColour:"",meanScreenWidth:"480",meanNavPush:"",meanShowChildren:!0,meanExpandableChildren:!0,meanExpand:"+",meanContract:"-",meanRemoveAttrs:!1,onePage:!1,meanDisplay:"block",removeElements:""};e=$.extend(n,e);var a=window.innerWidth||document.documentElement.clientWidth;return this.each(function(){var n=e.meanMenuTarget,t=e.meanMenuContainer,r=e.meanMenuClose,i=e.meanMenuCloseSize,s=e.meanMenuOpen,u=e.meanRevealPosition,m=e.meanRevealPositionDistance,l=e.meanRevealColour,o=e.meanScreenWidth,c=e.meanNavPush,v=".meanmenu-reveal",h=e.meanShowChildren,d=e.meanExpandableChildren,y=e.meanExpand,j=e.meanContract,Q=e.meanRemoveAttrs,f=e.onePage,g=e.meanDisplay,p=e.removeElements,C=!1;(navigator.userAgent.match(/iPhone/i)||navigator.userAgent.match(/iPod/i)||navigator.userAgent.match(/iPad/i)||navigator.userAgent.match(/Android/i)||navigator.userAgent.match(/Blackberry/i)||navigator.userAgent.match(/Windows Phone/i))&&(C=!0),(navigator.userAgent.match(/MSIE 8/i)||navigator.userAgent.match(/MSIE 7/i))&&jQuery("html").css("overflow-y","scroll");var w="",x=function(){if("center"===u){var e=window.innerWidth||document.documentElement.clientWidth,n=e/2-22+"px";w="left:"+n+";right:auto;",C?jQuery(".meanmenu-reveal").animate({left:n}):jQuery(".meanmenu-reveal").css("left",n)}},A=!1,E=!1;"right"===u&&(w="right:"+m+";left:auto;"),"left"===u&&(w="left:"+m+";right:auto;"),x();var M="",P=function(){M.html(jQuery(M).is(".meanmenu-reveal.meanclose")?r:s)},W=function(){jQuery(".mean-bar,.mean-push").remove(),jQuery(t).removeClass("mean-container"),jQuery(n).css("display",g),A=!1,E=!1,jQuery(p).removeClass("mean-remove")},b=function(){var e="background:"+l+";color:"+l+";"+w;if(o>=a){jQuery(p).addClass("mean-remove"),E=!0,jQuery(t).addClass("mean-container"),jQuery(".mean-container").prepend('
Show Navigation
');var r=jQuery(n).html();jQuery(".mean-nav").html(r),Q&&jQuery("nav.mean-nav ul, nav.mean-nav ul *").each(function(){jQuery(this).is(".mean-remove")?jQuery(this).attr("class","mean-remove"):jQuery(this).removeAttr("class"),jQuery(this).removeAttr("id")}),jQuery(n).before('
'),jQuery(".mean-push").css("margin-top",c),jQuery(n).hide(),jQuery(".meanmenu-reveal").show(),jQuery(v).html(s),M=jQuery(v),jQuery(".mean-nav ul").hide(),h?d?(jQuery(".mean-nav ul ul").each(function(){jQuery(this).children().length&&jQuery(this,"li:first").parent().append(''+y+"")}),jQuery(".mean-expand").on("click",function(e){e.preventDefault(),jQuery(this).hasClass("mean-clicked")?(jQuery(this).text(y),jQuery(this).prev("ul").slideUp(300,function(){})):(jQuery(this).text(j),jQuery(this).prev("ul").slideDown(300,function(){})),jQuery(this).toggleClass("mean-clicked")})):jQuery(".mean-nav ul ul").show():jQuery(".mean-nav ul ul").hide(),jQuery(".mean-nav ul li").last().addClass("mean-last"),M.removeClass("meanclose"),jQuery(M).click(function(e){e.preventDefault(),A===!1?(M.css("text-align","center"),M.css("text-indent","0"),M.css("font-size",i),jQuery(".mean-nav ul:first").slideDown(),A=!0):(jQuery(".mean-nav ul:first").slideUp(),A=!1),M.toggleClass("meanclose"),P(),jQuery(p).addClass("mean-remove")}),f&&jQuery(".mean-nav ul > li > a:first-child").on("click",function(){jQuery(".mean-nav ul:first").slideUp(),A=!1,jQuery(M).toggleClass("meanclose").html(s)})}else W()};C||jQuery(window).resize(function(){a=window.innerWidth||document.documentElement.clientWidth,a>o,W(),o>=a?(b(),x()):W()}),jQuery(window).resize(function(){a=window.innerWidth||document.documentElement.clientWidth,C?(x(),o>=a?E===!1&&b():W()):(W(),o>=a&&(b(),x()))}),b()})}}(jQuery); \ No newline at end of file +!function(e){"use strict";e.fn.meanmenu=function(n){var a={meanMenuTarget:jQuery(this),meanMenuContainer:"body",meanMenuClose:"X",meanMenuCloseSize:"18px",meanMenuOpen:"",meanRevealPosition:"right",meanRevealPositionDistance:"0",meanRevealColour:"",meanScreenWidth:"480",meanNavPush:"",meanShowChildren:!0,meanExpandableChildren:!0,meanExpand:"+",meanContract:"-",meanRemoveAttrs:!1,onePage:!1,meanDisplay:"block",removeElements:"",parentClickExpands:!0};n=e.extend(a,n);var t=window.innerWidth||document.documentElement.clientWidth;return this.each(function(){var e=n.meanMenuTarget,a=n.meanMenuContainer,r=n.meanMenuClose,i=n.meanMenuCloseSize,s=n.meanMenuOpen,m=n.meanRevealPosition,l=n.meanRevealPositionDistance,u=n.meanRevealColour,o=n.meanScreenWidth,c=n.meanNavPush,d=n.meanShowChildren,h=n.meanExpandableChildren,v=n.meanExpand,y=n.meanContract,j=n.meanRemoveAttrs,Q=n.onePage,p=n.meanDisplay,f=n.removeElements,g=n.parentClickExpands,C=!1;(navigator.userAgent.match(/iPhone/i)||navigator.userAgent.match(/iPod/i)||navigator.userAgent.match(/iPad/i)||navigator.userAgent.match(/Android/i)||navigator.userAgent.match(/Blackberry/i)||navigator.userAgent.match(/Windows Phone/i))&&(C=!0),(navigator.userAgent.match(/MSIE 8/i)||navigator.userAgent.match(/MSIE 7/i))&&jQuery("html").css("overflow-y","scroll");var w="",x=function(){if("center"===m){var e=(window.innerWidth||document.documentElement.clientWidth)/2-22+"px";w="left:"+e+";right:auto;",C?jQuery(".meanmenu-reveal").animate({left:e}):jQuery(".meanmenu-reveal").css("left",e)}},E=!1,A=!1;"right"===m&&(w="right:"+l+";left:auto;"),"left"===m&&(w="left:"+l+";right:auto;"),x();var k="",M=function(){jQuery(".mean-bar,.mean-push").remove(),jQuery(a).removeClass("mean-container"),jQuery(e).css("display",p),E=!1,A=!1,jQuery(f).removeClass("mean-remove")},P=function(){var n="background:"+u+";color:"+u+";"+w;if(t<=o){jQuery(f).addClass("mean-remove"),A=!0,jQuery(a).addClass("mean-container"),jQuery(".mean-container").prepend('
Show Navigation
');var m=jQuery(e).html();jQuery(".mean-nav").html(m),j&&jQuery("nav.mean-nav ul, nav.mean-nav ul *").each(function(){jQuery(this).is(".mean-remove")?jQuery(this).attr("class","mean-remove"):jQuery(this).removeAttr("class"),jQuery(this).removeAttr("id")}),jQuery(e).before('
'),jQuery(".mean-push").css("margin-top",c),jQuery(e).hide(),jQuery(".meanmenu-reveal").show(),jQuery(".meanmenu-reveal").html(s),k=jQuery(".meanmenu-reveal"),jQuery(".mean-nav ul").hide(),d?h?(jQuery(".mean-nav ul ul").each(function(){if(jQuery(this).children().length){let e=jQuery(this,"li:first").parent();e.append(''+v+""),!0===g&&e.children("a").first().addClass("mean-expand-cpy")}}),jQuery(".mean-expand-cpy").on("click",function(e){e.preventDefault(),jQuery(this).parent().children(".mean-expand").trigger("click")}),jQuery(".mean-expand").on("click",function(e){e.preventDefault(),jQuery(this).hasClass("mean-clicked")?(jQuery(this).html(v),jQuery(this).prev("ul").slideUp(300,function(){})):(jQuery(this).html(y),jQuery(this).prev("ul").slideDown(300,function(){})),jQuery(this).toggleClass("mean-clicked")})):jQuery(".mean-nav ul ul").show():jQuery(".mean-nav ul ul").hide(),jQuery(".mean-nav ul li").last().addClass("mean-last"),k.removeClass("meanclose"),jQuery(k).click(function(e){e.preventDefault(),!1===E?(k.css("text-align","center"),k.css("text-indent","0"),k.css("font-size",i),jQuery(".mean-nav ul:first").slideDown(),E=!0):(jQuery(".mean-nav ul:first").slideUp(),E=!1),k.toggleClass("meanclose"),jQuery(k).is(".meanmenu-reveal.meanclose")?k.html(r):k.html(s),jQuery(f).addClass("mean-remove")}),Q&&jQuery(".mean-nav ul > li > a:first-child").on("click",function(){jQuery(".mean-nav ul:first").slideUp(),E=!1,jQuery(k).toggleClass("meanclose").html(s)})}else M()};C||jQuery(window).resize(function(){t=window.innerWidth||document.documentElement.clientWidth,M(),t<=o?(P(),x()):M()}),jQuery(window).resize(function(){t=window.innerWidth||document.documentElement.clientWidth,C?(x(),t<=o?!1===A&&P():M()):(M(),t<=o&&(P(),x()))}),P()})}}(jQuery); \ No newline at end of file diff --git a/parent_expands.gif b/parent_expands.gif new file mode 100644 index 0000000..be52345 Binary files /dev/null and b/parent_expands.gif differ