Public Forums 71,145 posts

[vasilk Friend vasilkJoin date: July 2011Posts: 4Downloads:0Uploads:4]

#166805

Greetings!

Could you please help me how to set properly the hover parameter for the a group-title element in the megamenu?

Here is the website: http://nov.crkva.org.mk/ (it’s on Cyrillic, but you’ll get the point 😉 ) – the second menu element has a group. I can’t set the hover on the group-title.

I try with this:

.ja-megamenu .group-title a.over, .ja-megamenu .group-title a.active {
color: #FFCC00 !important;
}
but it doesn’t work.

Thank you!

Pozdravi od Skopje!
Vasil

[chavan Friend chavanJoin date: October 2014Posts: 4612Downloads:0Uploads:110 Thanked: 1440 times in 1290 posts]

#403540

Hi vasil

Copy file plugins/system/jat3/jat3/base-themes/js/menu/mega.js to templates/<ja templates/js/menu/

Replace this code


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));

by


li.addEvent('mouseenter', function(e) {
if (li.hasClass ('group')) {
li.addClass ('group-hover');
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));


Replace this code


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));

by


li.addEvent('mouseleave', function(e) {
if (li.hasClass ('group')) {
li.removeClass ('group-hover');
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));


Add this style in the end of template/<ja template>/css/template.css


.ja-megamenu ul.level1 li.group-hover div.group div.group-title a.mega span.menu-title {
background: #ffb7b7;
}


Surf your website.

[vasilk Friend vasilkJoin date: July 2011Posts: 4Downloads:0Uploads:4]

#403670

Zdravo Do Ha!

Thanks for the proposed solution – it works, but partially.

When I move from the group-title link to the children elements, the title is still colored. I would like to get back to the initial color (white). Also, when switching between different links, for some it works properly, for some not (you can check again on the live site). Is it something in the ‘mouseleave’ condition that should be changed?

Also, when I click on the title, afterward, the same link is not colored again as being active link. I guess this should be in an other peace of code, but I couldn’t locate it.

Could you please assist me with these two issues!

Thank you!
V.

[vasilk Friend vasilkJoin date: July 2011Posts: 4Downloads:0Uploads:4]

#403729

I’ve tried something different, bit better, but still not quite well!

Instead of adding the extra code for the exception (when the element is group), I’ve just commented out that part. Now it work bit better, but still, when I move down from the title to the child elements, the title is still hovered. Also, when I move up, from the children elements to the title, the hover does not work as well. So, it’s something in the group that makes the problem. For the other links of the menu it works pretty well!

Also, I still can’t find how to add the “active” class to the group-title. If I make some advancements will let you know!

Thanks!
Vasil

[chavan Friend chavanJoin date: October 2014Posts: 4612Downloads:0Uploads:110 Thanked: 1440 times in 1290 posts]

#403842

Hi vasilk

Could you provide me some screenshot indicate what you desire?

[vasilk Friend vasilkJoin date: July 2011Posts: 4Downloads:0Uploads:4]

#404130

Good idea!

So, here they are.

1st Problem:
The hover does not behave properly when moving from group-title to the children elements. This goes in the both ways.

When moving from group-title to the children, the group title is still hovered. I would like this not to happen. So, I would like in this case, only the child element to be hovered.

When moving from the children to the group-title, the group title is not hovered.

2nd Problem:

When a specific page is selected, it gets the “active” class which colors the link in the menu same as when it’s hovered (like an indication to show you on which page you are). So, this is one example from proper behavior from an other link.

Still, when I select the page from the group-title (in this case “Верувања”), the group-title does not get the “active” class and thus is not colored in the menu.

I hope that now you got a better understanding of the two issues relating to the group-title.

Thank you very much for you help!
Vasil

---

Attachments:

1. 
2. 
3. 
4. 

[chavan Friend chavanJoin date: October 2014Posts: 4612Downloads:0Uploads:110 Thanked: 1440 times in 1290 posts]

#404290

Hi Vasil

I need more time to find solution for your problem. I will replied you immediately when I solve it.

[chavan Friend chavanJoin date: October 2014Posts: 4612Downloads:0Uploads:110 Thanked: 1440 times in 1290 posts]

#406982

Hi Vasil

I have another solution for you. You could apply the below steps to solve your problem:
1. Open file templates/<ja template>/js/menu/mega.js
2. Find this line


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

Add this block code after this line


if (groupTitle = li.getElement('.group-title')) {
groupTitle.addEvent('mouseenter', function(e) {
this.addClass('over');
});
groupTitle.addEvent('mouseleave', function(e) {
this.removeClass('over');
});
}

3. Save mega.js file and open file templates/<ja template>/js/css/template.css
Add this line the end of file


.ja-megamenu div.group-title.over { background: #ffb7b7; }

4. Save and surf your site.

[Author]

Posts