Post by Emirates7 » Wed Dec 16, 2015 5:38 am

Videotutorial
Click here for Videotutorial

Demo
Click here for Demo

Features
- Easy to use
- User friendly
- Responsive design
- Multilanguage
- Multistore
- Label
- Custom background
- Vertical & Horizontal orientation
- Custom links
- Unlimited menu levels
- On/Off mobile option
- HTML contents support
- 8 animation types
- Cache
- and more...

Explore BackEnd Demo
- http://ninethemes.net/megamenu/opencart ... e/megamenu
- User: demo
- Pass: demo

Buy it
Buy it on opencart.com

New member

Posts

Joined
Thu Nov 14, 2013 4:12 am

Post by VictorDrummond » Wed Dec 16, 2015 8:12 am

Emirates7 wrote:....- On/Off mobile option....
What does that mean? ... I ask because onhover style menu do not function correctly on android tablet touch-screens, they are virtually unusable... It's the reason I decided to stay with default template. Cute menu, but... Is there a solution to this issue?

Hosting for Oc 2.x: Well tested on 2.03.1 including emails work correctly, cPanel Shared or WHM VPS, managed security, fast & reliable SSD drives, Raid 10 /4 disk redundancy, server locale - Texas, contact me to discuss further.


User avatar
Active Member

Posts

Joined
Sat Dec 15, 2012 12:41 pm
Location - On the balcony slammin' Margaritas

Post by Emirates7 » Fri Dec 18, 2015 10:20 pm

The MegaMenu has been used in many themes (eg Fastor - check it out). It was tested on different mobile devices and worked correctly. Could you explain in more detail your problem (use screenshots) then I will try to help you :)

New member

Posts

Joined
Thu Nov 14, 2013 4:12 am

Post by sanshay » Wed Apr 20, 2016 4:39 am

Hello

I have a them Themeglobalpro with mega-menu.
I have the same problem.
Works great on Ipad, iphone, desktop, laptop and different brownsers, but not on android devices.
Tested it on android 4.2 samsung with standard brownser and chrome, with Huawei android 5.1, samsung Tablet A android 5.0, but menu or links are not clickable.
Any idea?

I have OC 2.2 and url: webshop.locco-palace.be

Hope you have fix that i can go online. The theme owner dont awsered for more than a week, but i have to go online and making some money. I losing every day.
Hope for some help

Update: i get it working with a rip from antoher demo.
I replaced the megamenu.js code and is working now on android.
The code:

Code: Select all

var active = false;
var hover = false;
$(document).ready(function() {

	$("ul.megamenu li .sub-menu .content .hover-menu ul li").hover(function () {
		$(this).children("ul").show();
	},function () {
		$(this).children("ul").hide();
	});
	if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
		$("ul.megamenu > li.hover").click(function () {
			if($(this).find(".content").is(':visible')) { return false; }
			active = $(this);
			hover = true;
			$("ul.megamenu > li").removeClass("active");
			$(this).addClass("active");
			$("ul.megamenu > li").children(".sub-menu").hide();
			$("ul.megamenu > li").find(".content").hide();
			$(this).children(".sub-menu").show();
			if(transition == 'slide') {
				$(this).find(".content").show();
				$(this).find(".content").css("height", "auto");
				var originalHeight = $(this).find(".content").height();
				$(this).find(".content").css("height", 0);
				$(this).find(".content").stop(true, true).animate({ height:originalHeight },animation_time);
			} else if(transition == 'fade') {
				$(this).find(".content").fadeIn(animation_time);
			} else {
				$(this).find(".content").show();
			}		
			$(this).children(".sub-menu").css("right", "auto");
			var $whatever        = $(this).children(".sub-menu");
			var ending_right     = ($(window).width() - ($whatever.offset().left + $whatever.outerWidth()));
			var $whatever2       = $("ul.megamenu");
			var ending_right2    = ($(window).width() - ($whatever2.offset().left + $whatever2.outerWidth()));
			if(ending_right2 > ending_right) {
				$(this).children(".sub-menu").css("right", "0");
			}
		});
	} else {
		$("ul.megamenu > li.hover").hover(function () {
			active = $(this);
			hover = true;
			$("ul.megamenu > li").removeClass("active");
			$(this).addClass("active");
			$("ul.megamenu > li").children(".sub-menu").hide();
			$("ul.megamenu > li").find(".content").hide();
			$(this).children(".sub-menu").show();
			if(transition == 'slide') {
				$(this).find(".content").show();
				$(this).find(".content").css("height", "auto");
				var originalHeight = $(this).find(".content").height();
				$(this).find(".content").css("height", 0);
				$(this).find(".content").stop(true, true).animate({ height:originalHeight },animation_time);
			} else if(transition == 'fade') {
				$(this).find(".content").fadeIn(animation_time);
			} else {
				$(this).find(".content").show();
			}	
			$(this).children(".sub-menu").css("right", "auto");	
			var $whatever        = $(this).children(".sub-menu");
			var ending_right     = ($(window).width() - ($whatever.offset().left + $whatever.outerWidth()));
			var $whatever2       = $("ul.megamenu");
			var ending_right2    = ($(window).width() - ($whatever2.offset().left + $whatever2.outerWidth()));
			if(ending_right2 > ending_right) {
				$(this).children(".sub-menu").css("right", "0");
			}
		},function () {
			var rel = $(this).attr("title");
			hover = false;
			if(rel == 'hover-intent') {
				var hoverintent = $(this);
				setTimeout(function (){
					if(hover == false) {
						if(transition == 'slide') {
							$(hoverintent).find(".content").stop(true, true).animate({ height:"hide" },animation_time, function() { if(hover == false) { $(hoverintent).removeClass("active"); $(hoverintent).children(".sub-menu").hide(); } });
						} else if(transition == 'fade') {
							$(hoverintent).removeClass("active");
							$(hoverintent).find(".content").fadeOut(animation_time, function() {
								if(hover == false) { $(hoverintent).children(".sub-menu").hide(); }
							});
						} else {
							$(hoverintent).removeClass("active");
							$(hoverintent).children(".sub-menu").hide();
							$(hoverintent).find(".content").hide();
						}
					}
				}, 500);
			} else {
				if(transition == 'slide') {
					$(this).find(".content").stop(true, true).animate({ height:"hide" },animation_time, function() { if(hover == false) { $(active).removeClass("active"); $(active).children(".sub-menu").hide(); } });
				} else if(transition == 'fade') {
					$(active).removeClass("active");
					$(this).find(".content").fadeOut(animation_time, function() {
						if(hover == false) { $(active).children(".sub-menu").hide(); }
					});
				} else {
					$(this).removeClass("active");
					$(this).children(".sub-menu").hide();
					$(this).find(".content").hide();
				}
			}
		});
	}
	$("ul.megamenu > li.click").click(function () {
		if($(this).find(".content").is(':visible')) { return false; }
		active = $(this);
		hover = true;
		$("ul.megamenu > li").removeClass("active");
		$(this).addClass("active");
		$("ul.megamenu > li").children(".sub-menu").hide();
		$("ul.megamenu > li").find(".content").hide();
		$(this).children(".sub-menu").show();
		if(transition == 'slide') {
			$(this).find(".content").show();
			$(this).find(".content").css("height", "auto");
			var originalHeight = $(this).find(".content").height();
			$(this).find(".content").css("height", 0);
			$(this).find(".content").stop(true, true).animate({ height:originalHeight },animation_time);
		} else if(transition == 'fade') {
			$(this).find(".content").fadeIn(animation_time);
		} else {
			$(this).find(".content").show();
		}		
		$(this).children(".sub-menu").css("right", "auto");
		var $whatever        = $(this).children(".sub-menu");
		var ending_right     = ($(window).width() - ($whatever.offset().left + $whatever.outerWidth()));
		var $whatever2       = $("ul.megamenu");
		var ending_right2    = ($(window).width() - ($whatever2.offset().left + $whatever2.outerWidth()));
		if(ending_right2 > ending_right) {
			$(this).children(".sub-menu").css("right", "0");
		}
		return false;
	});
	$("#megaMenuToggle").click(function () {
		if($(".horizontal .megamenu-wrapper").is(':visible')) {
			$(".horizontal .megamenu-wrapper").stop(true, true).animate({ height:"hide" },animation_time);
		} else {
			$(".horizontal .megamenu-wrapper").stop(true, true).animate({ height:"toggle" },animation_time);
		}
		return false;
	});
	$('html').on('click', function () {
		$("ul.megamenu > li.click").removeClass("active");
		$("ul.megamenu > li.click").children(".sub-menu").hide();
		$("ul.megamenu > li.click").find(".content").hide();
	});
	$('.close-menu').on('click', function () {
		$(this).parent().removeClass("active");
		$(this).parent().children(".sub-menu").hide();
		$(this).parent().find(".content").hide();
		return false;
	});
});
Regards

Active Member

Posts

Joined
Fri Jan 25, 2013 8:49 pm

Post by Pegaton » Sat Mar 31, 2018 6:49 am

Hi, I purchased it, but I cannot get is working in Journal theme front end. I got this error notice: Undefined variable: modules
Please help me fix this. Regards, Jozsef

Newbie

Posts

Joined
Sat Mar 31, 2018 6:42 am

Post by sanshay » Sat Jul 14, 2018 2:56 am

Pegaton wrote:
Sat Mar 31, 2018 6:49 am
Hi, I purchased it, but I cannot get is working in Journal theme front end. I got this error notice: Undefined variable: modules
Please help me fix this. Regards, Jozsef
What version do you have on opencart?
This is only for 2.0.1.0, 2.0.1.1, 2.0.2.0, 2.0.3.1, 2.1.0.1
Not 2.2 or 2.3 or 3.0

Active Member

Posts

Joined
Fri Jan 25, 2013 8:49 pm
Who is online

Users browsing this forum: Ahrefs [Bot] and 71 guests