Leave parent menu item "hover" active

Hey,

Let me know if this works for you all. Add it immediately following the "settings['content'] = html;" line. You can change the class to whatever you want it to be by changing the word "on".

var thisTip = $(this);
	settings['api'] = {
         beforeShow: function()
         {
            thisTip.addClass('on');
         },
         beforeHide: function()
         {
            thisTip.removeClass('on');
         }
    };

Thanks for this, and I think this should be default.

Hi,

Can I second bumanthan's request for more details about the CSS part of this?

I need this to be working otherwise it just doesn't look right.

I use the following CSS for my 'hover' function on my mega-menu;

.menu li a:hover {
...
}

I've tried replacing 'on' with '.menu li a:hover', 'menu li a:hover', 'menu' and 'hover' and none of them do anything.

What do I need to do to get this to work? And do I need to do anything else other than add this snippet to the .js file?

Thanks in advance.

It's the li that has the class. So your CSS would look like this: li.on a{}
So for mine I added that to the active / hover state of the menu item. If you need more specific examples, let me know, and I will share them.

Hi BMX, thanks for your attention on this.

I completely agree with you that this should be default on future releases of this module!

I've tried this again and I still can't get it to work.

This is the end of my .js file;

settings['content'] = html;
    var thisTip = $(this);
settings['api'] = {
         beforeShow: function()
         {
            thisTip.addClass('on');
         },
         beforeHide: function()
         {
            thisTip.removeClass('on');
         }
    };
    $(this).qtip(settings);
  });

And this is the CSS which I'm using for the menu currently;

.menu li a {
  color:#fff;
  display:block;
  font:tahoma;
  font-weight:normal;
  text-decoration:none;
  padding: 8px 25px 9px 25px;
}
.menu li a:hover {
  color:#000;
  font-weight:normal;
  text-decoration:none;
  background:#f3f3f3;
}

I tried adding 'li.on a {my hover settings}' and that didn't make any difference.

Any help would be great!

Thanks.

Looks like the menu_minipanels.js is incorrect.

The line 47 to the end should look like this:

    settings['content'] = html;
    var thisTip = $(this);
	settings['api'] = {
         beforeShow: function()
         {
            thisTip.addClass('on');
         },
         beforeHide: function()
         {
            thisTip.removeClass('on');
         }
    };    
    $(this).qtip(settings);
  });
};

I am thinking this because you do not have "on" showing up.

Here is what it looks like on a dev site of mine. http://whistler.rjdempsey.com

-Trent

Thanks all, I've fixed it in the end!

I think it was a mixture of the .js and playing with the CSS.

For anybody else who has problems with the CSS on this, this is what I had and then had to change it too;

Old;

.menu li a{
  color:#fff;
  display:block;
  font:tahoma;
  font-weight:normal;
  text-decoration:none;
  padding: 8px 25px 9px 25px;
}
.menu li a:hover{
  color:#000;
  font-weight:normal;
  text-decoration:none;
  background:#f3f3f3;
}

New;

.menu li a{
  color:#fff;
  display:block;
  font:tahoma;
  font-weight:normal;
  text-decoration:none;
  padding: 8px 25px 9px 25px;
}
.menu li a.on{
  color:#000;
  font-weight:normal;
  text-decoration:none;
  background:#f3f3f3;
}

For Drupal 7 you can add this after line 36

var thisTip = $(this);
settings['api'] = {
beforeShow: function()
{
thisTip.addClass('on');
},
beforeHide: function()
{
thisTip.removeClass('on');
}
};

A few things to consider:

• I don't believe there's a way to really mimic the 'hover' JS event other than using classes.
• Different themes have different class structures, though the most common is to add a class "active" to the currently DOM element and then theme to e.g. "ul li a.active".
• Thanks to #1116990: Give access to qTip callbacks, we now have the qTip callbacks available; I've included an example of how to do this for the Omega theme in the API.txt instructions, but the code will work or be adaptable for other themes depending on your needs. This will be included in the next RC release for both the D6 and D7 branches.

Going to mark this one as 'fixed' due to the above.

Still can't understand what the issue is with adding this to the module. If it is class naming, then active-trail is more what it should be. Thx

I'll review this again, I must have overlooked comment #2 above.

Another issue with a similar goal but a different implementation: #1304560: Apply hover class to triggering menu link I'll review both of these this weekend and will commit the best option.

I committed patches from #1304560: Apply hover class to triggering menu link, which also resolve this issue. The README.txt file explains the class name to use, and the API.txt file includes example code to use a different class, if needed.

Anyone participating on this issue should definitely update to the latest release candidate and use the qtip-hover class!

It rocks, however, I've just filed a related issue that I'm experiencing on sites where I'm using the qtip-hover.

Please checkout #1425046: Qtip-hover state is sticking. Your feedback is appreciated.

Menu Minipanels - version 6.x-1.4+0-dev

I looked around in module menu_minipanels that has menu_minipanels.callbacks.js.
The problem is that it does not apply "qtip-hover" css to menu minipanel when tab is hovered or megamenu (with minipanels) is open.

I wonder what could be wrong. I tried other way as instructed in that js file but it still doesnt work. Will appreciate if you could take a look.
thanks