Joomla Templates Club 406,261 posts

[cybernun Friend cybernunJoin date: July 2009Posts: 226Downloads:0Uploads:16 Thanks: 111 Thanked: 6 times in 1 posts]

#180778

Houston we have a problem.
Great template but unstable Menu system. I have approached every Mod maker, consulted forum, re-installed template and no-one hasan answer as to why drop-downs are not working.
PLEASE post answers to this problem asap.

DEVS: I sent site details.

[cirymarr Friend cirymarrJoin date: August 2010Posts: 38Downloads:0Uploads:1 Thanks: 2]

#467414

Ditto – menu system does not work.

[tfosnom Friend tfosnomJoin date: October 2010Posts: 742Downloads:0Uploads:31 Thanks: 145 Thanked: 200 times in 94 posts]

#467415

Hi Cybernun
Do you want to PM Re Menus, as you know I’ve installed the latest version and I’m not having any real problems with the menus when set to Mega menu, which is all I ever use. Together we may be able to test and isolate your probs.
Blessings Shannon

[we2solutions Friend we2solutionsJoin date: September 2014Posts: 526Downloads:0Uploads:21 Thanks: 136 Thanked: 100 times in 1 posts]

#467419

Hi,

As shannon says when it set to mega menu without any problem it working for me.but if you can post a screen shot it will help to understand what kin of issue you getting..

Thanks

[cirymarr Friend cirymarrJoin date: August 2010Posts: 38Downloads:0Uploads:1 Thanks: 2]

#467422

My menu dropdowns simply don’t work, with mega menu option – http://www.costa.c-meonline.com

[tfosnom Friend tfosnomJoin date: October 2010Posts: 742Downloads:0Uploads:31 Thanks: 145 Thanked: 200 times in 94 posts]

#467425

Try this extension
http://extensions.joomla.org/extensions/core-enhancements/performance/jquery-scripts/18327

Also In IE 9 your whole menu wraps onto two lines that is the blog is below everything, In FF it’s all on one line, you need to reduce the number of menu items or reduce font size of menu to smaller
Shannon

[Sherlock Friend SherlockJoin date: September 2014Posts: 11453Downloads:0Uploads:88 Thanks: 221 Thanked: 2478 times in 2162 posts]

#467486

Hi guys,

To fix this issue of mega menu you open the file of templatesja_universityjsmenumega.js at the line number 67 you would see this code

else {
this.imgloaded = true;
this.start();
}

change it to

else {
window.addEvent(‘load’, function(){
this.imgloaded = true;
this.start();
}.bind(this));
}

let me know if it help !

1 user says Thank You to Sherlock for this useful post

1. haxx

[cirymarr Friend cirymarrJoin date: August 2010Posts: 38Downloads:0Uploads:1 Thanks: 2]

#467539

<em>@tfosnom 338727 wrote:</em><blockquote>Try this extension
http://extensions.joomla.org/extensions/core-enhancements/performance/jquery-scripts/18327

Also In IE 9 your whole menu wraps onto two lines that is the blog is below everything, In FF it’s all on one line, you need to reduce the number of menu items or reduce font size of menu to smaller
Shannon</blockquote>

I tried that, but to no avail….unfortunately.

[ametzler79 Friend ametzler79Join date: September 2012Posts: 9Downloads:0Uploads:0]

#467542

I got it working, overwrite your entire mega.js with this code, it is from the base jat3 template, worked perfectly for me.

/**
* ------------------------------------------------------------------------
* JA T3 System plugin for Joomla 1.7
* ------------------------------------------------------------------------
* Copyright (C) 2004-2011 J.O.O.M Solutions Co., Ltd. All Rights Reserved.
* @license - GNU/GPL, http://www.gnu.org/licenses/gpl.html
* Author: J.O.O.M Solutions Co., Ltd
* Websites: http://www.joomlart.com - http://www.joomlancers.com
* ------------------------------------------------------------------------
*/

var jaMegaMenuMoo = new Class({

initialize: function(menu, options){
this.options = $extend({
slide: true, //enable slide
duration: 300, //slide speed. lower for slower, bigger for faster
fading: false, //Enable fading
bgopacity: 0.9, //set the transparent background. 0 to disable, 0<bgopacity<1: the opacity of the background
delayHide: 500,
direction: 'down',
action: 'mouseenter', //mouseenter or click
hidestyle: 'normal'
}, options || {});
//ignore delayHide if no animation
if (!this.options.slide && !this.options.fading) this.options.delayHide = 10;

this.menu = menu;
this.childopen = new Array();
this.imageloaded = false;
this.loaded = false;
//window.addEvent('load', this.start.bind(this));
this.start();
},

start: function () {
//do nothing if loaded
if (this.loaded) return;

this.menu = $(this.menu);
//preload images
var images = this.menu.getElements ('img');
if (images && images.length && !this.imageloaded) {
var imgs = [];
images.each (function (image) {imgs.push(image.src)});
if (imgs.length) {
new Asset.images(imgs, {
onComplete: function(){
this.start();
}.bind(this)
});
this.imageloaded = true;

//call this start if cannot load image after sometime
this.start.delay (3000, this);
return ;
}
}

//mark as called
this.loaded = true;

//get wrapper
p = this.menu;
while (p=p.getParent()) {
if (p.hasClass ('main') || p.hasClass ('wrap')) {this.wrapper = p; break;}
}
this.items = this.menu.getElements ('li.mega');
//this.items.setStyle ('position', 'relative');
this.items.each (function(li) {
//link item
if ((a = li.getElement('a.mega')) && this.isChild (a, li)) li.a = a;
else li.a = null;
//parent
li._parent = this.getParent (li);
//child content
if ((childcontent = li.getElement('.childcontent')) && this.isChild (childcontent, li)) {
li.childcontent = childcontent;
li.childcontent_inner = li.childcontent.getElement ('.childcontent-inner-wrap');
var coor = li.childcontent_inner.getCoordinates ();
li._w = li.getElement('.childcontent-inner').offsetWidth;
li._h = li.getElement('.childcontent-inner').offsetHeight;

li.level0 = li.getParent().hasClass('level0');
//
li.childcontent.setStyles ({'width':li._w+10, 'height':li._h});
li.childcontent_inner.setStyles ({'width':li._w});
//fix for overflow
li.childcontent_inner1 = li.childcontent.getElement ('.childcontent-inner');
li.childcontent_inner1.ol = false;
if (li.childcontent_inner1.getStyle ('overflow') == 'auto' || li.childcontent_inner1.getStyle ('overflow') == 'scroll') {
li.childcontent_inner1.ol = true;
//fix for ie6/7
if (window.ie6 || window.ie7) {
li.childcontent_inner1.setStyle ('position', 'relative');
}

if (window.ie6) {
li.childcontent_inner1.setStyle ('height', li.childcontent_inner1.getStyle ('max-height') || 400);
}
}

//show direction
if (this.options.direction == 'up') {
if (li.level0) {
li.childcontent.setStyle ('top', -li.childcontent.offsetHeight); //ajust top position
} else {
li.childcontent.setStyle ('bottom', 0);
}
}
}
else li.childcontent = null;

if (li.childcontent && this.options.bgopacity) {
//Make transparent background
var bg = new Element ('div', {'class':'childcontent-bg'});
bg.injectTop (li.childcontent_inner);
bg.setStyles ({'width':'100%', 'height':li._h, 'opacity':this.options.bgopacity,
'position': 'absolute', 'top': 0, 'left': 0, 'z-index': 1
});
if (li.childcontent.getStyle('background')) bg.setStyle ('background', li.childcontent.getStyle('background'));
if (li.childcontent.getStyle('background-image')) bg.setStyle ('background-image', li.childcontent.getStyle('background-image'));
if (li.childcontent.getStyle('background-repeat')) bg.setStyle ('background-repeat', li.childcontent.getStyle('background-repeat'));
if (li.childcontent.getStyle('background-color')) bg.setStyle ('background-color', li.childcontent.getStyle('background-color'));
li.childcontent.setStyle ('background', 'none');
li.childcontent_inner.setStyles ({'position':'relative', 'z-index': 2});
}

if (li.childcontent && (this.options.slide || this.options.fading)) {
//li.childcontent.setStyles ({'width': li._w});
li.childcontent.setStyles ({'left':'auto'});
if (li.childcontent.hasClass ('right')) li.childcontent.setStyle ('right', 0);
if (this.options.slide) {
li.childcontent.setStyles ({'left':'auto', 'overflow':'hidden'});
if (li.level0) {
if (this.options.direction == 'up') {
li.childcontent_inner.setStyle ('bottom', -li._h-20);
} else {
li.childcontent_inner.setStyle ('margin-top', -li._h-20);
}

} else {
li.childcontent_inner.setStyle ('margin-left', -li._w-20);
}
}
if (this.options.fading) {
li.childcontent_inner.setStyle ('opacity', 0);
}
//Init Fx.Styles for childcontent
//li.fx = new Fx.Styles(li.childcontent_inner, {duration: this.options.duration, transition: Fx.Transitions.linear, onComplete: this.itemAnimDone.bind(this, li)});
//li.fx = new Fx.Tween (li.childcontent_inner, {duration: this.options.duration, transition: Fx.Transitions.linear, onComplete: this.itemAnimDone.bind(this, li)});
// Dohq: Fix for use both fade & slide
li.fx = new Fx.Morph (li.childcontent_inner, {duration: this.options.duration, transition: Fx.Transitions.linear, onComplete: this.itemAnimDone.bind(this, li)});
//effect
//li.eff_on = {p:[],to:[]};
//li.eff_off = {p:[],to:[]};
li.eff_on = {};
li.eff_off = {};
if (this.options.slide) {
if (li.level0) {
if (this.options.direction == 'up') {
li.eff_on ['bottom'] = 0;
li.eff_off ['bottom'] = -li._h;

// li.eff_on.p.push ('bottom');
// li.eff_on.to.push (0);
// li.eff_off.p.push ('bottom');
// li.eff_off.to.push (-li._h);
} else {
li.eff_on ['margin-top'] = 0;
li.eff_off ['margin-top'] = -li._h;

// li.eff_on.p.push ('margin-top');
// li.eff_on.to.push (0);
// li.eff_off.p.push ('margin-top');
// li.eff_off.to.push (-li._h);
}
} else {
li.eff_on['margin-left'] = 0;
li.eff_off['margin-left'] = -li._w;

// li.eff_on.p.push ('margin-left');
// li.eff_on.to.push (0);
// li.eff_off.p.push ('margin-left');
// li.eff_off.to.push (-li._w);
}
}
if (this.options.fading) {
li.eff_on ['opacity'] = 1;
li.eff_off['opacity'] = 0;
// li.eff_on = ['opacity',1];
// li.eff_off = ['opacity',0];

// li.eff_on.p.push ('opacity');
// li.eff_on.to.push (1);
// li.eff_off.p.push ('opacity');
// li.eff_off.to.push (0);
}
}

if (this.options.action=='click' && li.childcontent) {
li.addEvent('click', function(e) {
var event = new Event (e);
if (li.hasClass ('group')) return;
if (li.childcontent) {
if (li.status == 'open') {
if (this.cursorIn (li, event)) {
this.itemHide (li);
} else {
this.itemHideOthers(li);
}
} else {
this.itemShow (li);
}
} else {
if (li.a) location.href = li.a.href;
}
event.stopPropagation();
}.bind (this));
}

if (this.options.action == 'mouseover' || this.options.action == 'mouseenter') {
li.addEvent('mouseenter', function(e) {
if (li.hasClass ('group')) return;
$clear (li.timer);
this.itemShow (li);
if (!e.stopped) {
e.stopPropagation();
e.stopped = true; //make sure the stop function is call only once
}
}.bind (this));

li.addEvent('mouseleave', function(e) {
if (li.hasClass ('group')) return;
$clear (li.timer);
if (li.childcontent) li.timer = this.itemHide.delay(this.options.delayHide, this, [li, e]);
else this.itemHide (li, e);
if (!e.stopped) {
e.stopPropagation();
e.stopped = true; //make sure the stop function is call only once
}
}.bind (this));

//if has childcontent, don't goto link before open childcontent - fix for touch screen
if (li.a && li.childcontent) {
li.clickable = false;
li.a.addEvent ('click',function (e){
if (!li.clickable) {
new Event(e).stop();
}
}.bind (this));
}

//stop if click on menu item - prevent raise event to container => hide all open submenu
li.addEvent ('click', function (e) {new Event(e).stopPropagation()});
}

//when click on a link - close all open childcontent
if (li.a && !li.childcontent) {
li.a.addEvent ('click',function (e){
this.itemHideOthers (null);
//Remove current class
this.menu.getElements ('.active').removeClass ('active');
//Add current class
var p = li;
while (p) {
p.addClass ('active');
p.a.addClass ('active');
p = p._parent;
}
new Event (e).stopPropagation();//prevent to raise event up
}.bind (this));
}

if (li.childcontent) this.positionSubmenu (li);
},this);

//click on windows will close all submenus
var container = $('ja-wrapper');
if (!container) container = document.body;
container.addEvent ('click',function (e) {
this.itemHideOthers(null);
}.bind(this));

if (this.options.slide || this.options.fading) {
//hide all content child
this.menu.getElements('.childcontent').setStyle ('display', 'none');
}

},

getParent: function (li) {
var p = li;
while ((p=p.getParent())) {
if (this.items.contains (p) && !p.hasClass ('group')) return p;
if (!p || p == this.menu) return null;
}
},

cursorIn: function (el, event) {
if (!el || !event) return false;
var pos = $merge (el.getPosition(), {'w':el.offsetWidth, 'h': el.offsetHeight});;
var cursor = {'x': event.page.x, 'y': event.page.y};

if (cursor.x>pos.x && cursor.x<pos.x+el.offsetWidth
&& cursor.y>pos.y && cursor.y<pos.y+el.offsetHeight) return true;
return false;
},

isChild: function (child, parent) {
return !!parent.getChildren().contains (child);
},

itemOver: function (li) {
if (li.hasClass ('haschild'))
li.removeClass ('haschild').addClass ('haschild-over');
li.addClass ('over');
if (li.a) {
li.a.addClass ('over');
}
},

itemOut: function (li) {
if (li.hasClass ('haschild-over'))
li.removeClass ('haschild-over').addClass ('haschild');
li.removeClass ('over');
if (li.a) {
li.a.removeClass ('over');
}
},

itemShow: function (li) {
clearTimeout(li.timer);
if (li.status == 'open') return; //don't need do anything
//Setup the class
this.itemOver (li);
//push to show queue
li.status = 'open';
this.enableclick.delay (100, this, li);
this.childopen.push (li);
//hide other
this.itemHideOthers (li);
if (li.childcontent) {
//reposition the submenu
this.positionSubmenu (li);
}

if (!$defined(li.fx) || !$defined(li.childcontent)) return;

li.childcontent.setStyle ('display', 'block');

li.childcontent.setStyles ({'overflow': 'hidden'});
if (li.childcontent_inner1.ol) li.childcontent_inner1.setStyles ({'overflow': 'hidden'});
li.fx.cancel();

li.fx.start (li.eff_on);
//li.fx.start (li.eff_on.p, li.eff_on.to);
//if (li._parent) this.itemShow (li._parent);
},

itemHide: function (li, e) {
if (e && e.page) { //if event
if (this.cursorIn (li, e) || this.cursorIn (li.childcontent, e)) {
return;
} //cursor in li
var p=li._parent;
if (p && !this.cursorIn (p, e) && !this.cursorIn(p.childcontent, e)) {
p.fireEvent ('mouseleave', e); //fire mouseleave event
}
}
clearTimeout(li.timer);
this.itemOut(li);
li.status = 'close';
this.childopen.erase (li);

if (!$defined(li.fx) || !$defined(li.childcontent)) return;

if (li.childcontent.getStyle ('opacity') == 0) return;
li.childcontent.setStyles ({'overflow': 'hidden'});
if (li.childcontent_inner1.ol) li.childcontent_inner1.setStyles ({'overflow': 'hidden'});
li.fx.cancel();
switch (this.options.hidestyle) {
case 'fast':
li.fx.options.duration = 100;
li.fx.start(Object.merge(li.eff_off,{'opacity':0}));
//li.fx.start ($merge(li.eff_off,{'opacity':0}));
//li.fx.start(li.eff_off.p, li.eff_off.to);
break;
case 'fastwhenshow': //when other show
if (!e) { //force hide, not because of event => hide fast
li.fx.start (Object.merge(li.eff_off,{'opacity':0}));
//li.fx.options.duration = 300;
//li.fx.start ($merge(li.eff_off,{'opacity':0}));
//li.fx.start(li.eff_off.p, li.eff_off.to);
} else { //hide as normal
li.fx.start (li.eff_off);
//li.fx.start (li.eff_off);
//li.fx.start(li.eff_off.p, li.eff_off.to);
}
break;
case 'normal':
default:
li.fx.start (li.eff_off);
//li.fx.start(li.eff_off.p, li.eff_off.to);
break;
}
//li.fx.start (li.eff_off);
},

itemAnimDone: function (li) {
//hide done
if (li.status == 'close'){
//reset duration and enable opacity if not fading
if (this.options.hidestyle.test (/fast/)) {
li.fx.options.duration = this.options.duration;
if (!this.options.fading) li.childcontent_inner.setStyle ('opacity', 1);
}
//hide
li.childcontent.setStyles ({'display': 'none'});
this.disableclick.delay (100, this, li);
}

//show done
if (li.status == 'open'){
li.childcontent.setStyles ({'overflow': ''});
if (li.childcontent_inner1.ol) li.childcontent_inner1.setStyles ({'overflow-y': 'auto'});
li.childcontent_inner.setStyle ('opacity', 1);
li.childcontent.setStyles ({'display': 'block'});
}
},

itemHideOthers: function (el) {
var fakeevent = null
if (el && !el.childcontent) fakeevent = {};
var curopen = this.childopen;
curopen.each (function(li) {
if (li && typeof (li.status) != 'undefined' && (!el || (li != el && !li.hasChild (el)))) {
this.itemHide(li, fakeevent);
}
},this);
},

enableclick: function (li) {
if (li.a && li.childcontent) li.clickable = true;
},
disableclick: function (li) {
if (li.a && li.childcontent) li.clickable = false;
},

positionSubmenu: function (li) {
if (li.level0) {
if (!window.isRTL) {
//check position
var lcor = li.getCoordinates();
var ccor = li.childcontent.getCoordinates();
if(!ccor.width)
{
li.childcontent.setStyle ('display', 'block');
ccor = li.childcontent.getCoordinates();
li.childcontent.setStyle ('display', 'none');
}

var ml = 0;
var l = lcor.left;
var r = l + ccor.width;
if (this.wrapper) {
var wcor = this.wrapper.getCoordinates();
l = l - wcor.left;
r = wcor.right - r + 10;
} else {
r = window.getWidth() - r + 10;
}
if (l < 0 || l+r < 0) {
ml = - l;
} else if (r < 0) {
ml = r;
}
if (ml != 0) li.childcontent.setStyle ('margin-left', ml);
} else {
//check position
var lcor = li.getCoordinates();
var ccor = li.childcontent.getCoordinates();
if(!ccor.width)
{
li.childcontent.setStyle ('display', 'block');
ccor = li.childcontent.getCoordinates();
li.childcontent.setStyle ('display', 'none');
}
var mr = 0;
var r = lcor.right;
var l = r - ccor.width;
if (this.wrapper) {
var wcor = this.wrapper.getCoordinates();
l = l - wcor.left;
r = wcor.right - r + 10;
} else {
r = window.getWidth() - r + 10;
}
if (r < 0 || l+r < 0) {
mr = - r;
} else if (l < 0) {
mr = l;
}
if (mr != 0) li.childcontent.setStyle ('margin-right', mr);
}
} else {
//check if it's out of view-port
var lcor = li.getCoordinates();
var ccor = li.childcontent.getCoordinates();
if(!ccor.width)
{
li.childcontent.setStyle ('display', 'block');
ccor = li.childcontent.getCoordinates();
li.childcontent.setStyle ('display', 'none');
}
var ml = 0;
var l = ccor.left;
var r = l + ccor.width;
if (this.wrapper) {
var wcor = this.wrapper.getCoordinates();
l = l - wcor.left;
r = wcor.right - r + 10;
} else {
r = window.getWidth() - r + 10;
}
if (r < 0) {
//change the direction and position for submenu
li.childcontent.setStyle ('margin-left', -ccor.width + 20);
//li.eff_on['margin-left'] = 0;
//li.eff_off['margin-left'] = li._w + 20;
li.childcontent_inner.setStyle ('margin-left', li._w + 20);
}
}
}
});


[cirymarr Friend cirymarrJoin date: August 2010Posts: 38Downloads:0Uploads:1 Thanks: 2]

#467599

That works fine on the homepage, but not on any subsequent pages, for me. http://www.costa.c-meonline.com

[Sherlock Friend SherlockJoin date: September 2014Posts: 11453Downloads:0Uploads:88 Thanks: 221 Thanked: 2478 times in 2162 posts]

#467601

Hi cirymarr,

You should keep the original file of templates/ja_university/js/menu/mega.js then make change as my suggestion above, also removing caches after the changes is made.

[haxx Friend haxxJoin date: September 2014Posts: 106Downloads:39Uploads:19 Thanks: 32 Thanked: 18 times in 2 posts]

#467650

Hi

I had this problem with the Mega Menu but have applied the fix as described above, cleaned the cache and it works perfectly.:D

[cirymarr Friend cirymarrJoin date: August 2010Posts: 38Downloads:0Uploads:1 Thanks: 2]

#467681

Hi Sherlock – could you possibly PM me the “correctly amended” mega.js as you describe, because I think I’ve messed up here a bit.

Many thanks in advance.

[kennatechnical Friend kennatechnicalJoin date: January 2011Posts: 28Downloads:0Uploads:10 Thanks: 10]

#467686

My mega menu isn’t working………

Well i freaking figured out my problem any way all. I installed the JoomlaCK editor and enabled it through the global config. I did it a while ago and forgot to test it until several hours later…….tricking my mind into thinking it was something else related.
I turn it off, my megamenu works; turn it on, it doesn’t.

Probably not related to others issues but it certainly has affected mine………….now i can sleep a little easier tonight

[HeR0 Friend HeR0Join date: August 2011Posts: 3626Downloads:0Uploads:61 Thanks: 33 Thanked: 588 times in 549 posts]

#467721

Hi Kennatechnical
I think that has a conflict js between mega menu with joomlack. Please post link of your site then i’ll check on it.

Regards,

[Author]

Posts