(function($) { $.fn.megamenu = function(options) { this.css({ position: "relative", display: "block" }); var settings = $.extend({ triggerval: "+", label: "Back", title: !0, updataHeight: !0, animationSpeed: 300 }, options); this.each((function() { $(".dl-back").each((function() { var labelval = $(this).parent().parent().children("a").text(); $(this).children("a").text(labelval) } )); var el = $(this); $(this).parent().css({ overflow: "hidden" }), $(this).find("ul").prepend('<li class="dl-back"><a href="javascript:;">' + settings.label + "</a></li>"), $(this).find("ul").parent("li").children("a").after('<div class="child-trigger">' + settings.triggerval + "</div>"), jQuery(this).find("ul").attr("data-level", (function() { return "level-" + (jQuery(this).parents("ul").length + 1) } )); var allmenu = $(this).find("ul"); allmenu.width($(this).width()), allmenu.css("cssText", "position: absolute !important; top :0px; left:100%; display:none; width:100%"), $(".child-trigger").click((function() { if (el.animate({ left: "-=100%" }, settings.animationSpeed), $(this).next("ul").css({ display: "block" }), !0 === settings.updataHeight) { var updateHeight = $(this).next("ul").height(); el.parent().css({ height: updateHeight + "px" }) } } )), $(".dl-back").click((function() { if ($(el).animate({ left: "+=100%" }, settings.animationSpeed), $(this).parent("ul").css({ display: "none" }), !0 === settings.updataHeight) { var reverseHeight = $(this).parent().parent().parent().height(); el.parent().css({ height: reverseHeight + "px" }) } } )), !0 === settings.title && $(".dl-back").each((function() { var labelval = $(this).parent().parent().children("a").text(); $(this).children("a").text(labelval) } )) } )) } })(jQuery), $(".n-mobilenav .inner .hs-menu-wrapper>ul").megamenu({ triggerval: "+", label: "Menu", title: !0, updataHeight: !0, animationSpeed: 400 });
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter