I am trying to produce a menu similar to http://www.bostonglobe.com. What I am missing is how to keep the parent menu (menu bar) highlighted when I drop down to the menu items contained in the mini panels. The menu title reverts back to the unhovered state when I am selecting menu items contained in the child mini panel. I am not the best with CSS so I will appreciate any help.

Comments

stevieegee’s picture

stevieegee commented

After one week of struggling with this I found a piece pointing at the following tip in the Read Me file straight after I posted the previous post (I feel a bit dumb!) -

The module will add the class "qtip-hover" to the menu item which triggered the minipanel to display, allowing it to be themed to match the normal :hover state. There is not currently a way to make it retain the :hover state while the pointer is over the minipanel, so this is a work-around.

I feel even dumber since I don't understand it! How do I implement the work-around to retain the :hover state while the pointer is over the minipanel?

stevieegee’s picture

stevieegee commented
Component: Miscellaneous » Documentation

I have changed this to a Documentation issue, since it can be done - Menu Minipanels is used on http://www.soundandvisionmag.com . This module is a great aid for none programmers to layout mega menus effectively. If somebody could explain how to implement a hover on the menu title, when hovering over the mini panel, I will write an easy to understand Menu Minipanels tutorial for all, through the eyes of a Drupal beginner.

sammcd’s picture

sammcd commented

I can't say I know how the following _really_ works qtip-wise, but this is what we have added/appended to
modules/menu_minipanels/js/menu_minipanels.callbacks.js

// Mark target element as selected.
MenuMiniPanels.setCallback('beforeShow', function(qTip, event, content) {
// Forceably remove the class off all DOM elements, avoid problems
// of it not being properly removed in certain scenarios.
$('.qtip-hover').removeClass('qtip-hover');
// Add the hover class to the current item.
var $target = $(qTip.elements.target.get(0));
if ($target !== undefined) {
$target.addClass('qtip-hover');
$target.addClass('mmAhover');
}
});

// Unmark target element as selected.
MenuMiniPanels.setCallback('beforeHide', function(qTip, event, content) {
// Remove the class off all DOM elements.
$('.qtip-hover').removeClass('qtip-hover');
var $target = $(qTip.elements.target.get(0));
if ($target !== undefined) {
$target.removeClass('mmAhover');
}
});

so from Firebug a tab resolves like (when 'hovered)'
<a href="/services" title="" class="menu-minipanel menu-minipanel-722 minipanel-processed qtip-hover mmAhover">Services & Tools</a>

so the jQuery callback adds this class to the tab so your styles have effect.

this presumes you have a styles not unlike
.qtip-hover {background-color:#CCCCCC;color:#d20134;}
.mmAhover {background-color:#E6E6E6 !important; color:#4D4D4D !important;}
..the background & text colors, in this case, are to set the hover effect on the tab when you are over the minipanel. one could be fancier as needed.
Now that I look at it again I see I probably could have added/removed attributes to .qtip-hover rather than using a new class
(.mmAhover is my goofy class name I meant 'mega menu anchor hover')

hopefully someone will find this is some small use.
PS I'm not sure how I'd set title="" if I wanted to...

stevieegee’s picture

stevieegee commented

Thanks Sam, I will try to implement your solution using my limited skills! Cheers for helping me out.