I'm sure someone has solved this but I can't seem to find the solution.

I would like to be able to modify my Nice Menu so that the child menu is visible when I am on a page that is a parent of child pages or child page of an active-trail parent.

I see that the script that initializes the nice menu makes the child menus hidden so it should be a matter of filtering the initialization script so that children of active-trail are not affected.

Any ideas?

Thanks,
Andrew

Comments

awasson’s picture

In order to make the nice menu behave in the way that I want it to so that the child menu items are always visible within a active-trail parent I modified the following:

  • superfish.js ~ remarked out line 105;
  • nice_menus.js ~ remarked out line 23;

I also added a line in my stylesheet as follows to override the nice_menu stylesheet:

  • ul.nice-menu li.active-trail ul {
    visibility: visible;
    }

I'll likely create an init.js file to override superfish.js and nice_menus.js or maybe I'll create a module to give me administrative control over it but for now, that's how I did it in case it helps anyone else.

Andrew

l.damen’s picture

This solution is exactly what i needed so thank you.
The only problem at my site is, my submenu's are all on the same spot (by css), so if i hover over another menu-parent, my active-trail stays in front, a top of the hover-submenu.
Any idea?

robinrew’s picture

Issue tags: +nice menus

Been trying todo the same in drupal 7, never really a good practice to edit module files just in case of updates and fixes. But found this article helpful: http://drupal.org/node/424148. Using your own js file it will do some final logic to display your active trail. I found some conflicts with the jquery dom ready in chrome, using the jquery namespace alias fixed this. Here's the bit of code i dropped in my global.js file.

jQuery(document).ready(function($) {

  // Set active-trail visible on page load
  // This only sets the secondary list of the active trail to visible
  $('ul.nice-menu li.active-trail ul').show();
  $('ul.nice-menu li.active-trail ul').css('visibility', 'visible');
 
  // Bind the menu to mouseleave to set active-trail visible when done navigating
  // Suckerfish will hide all secondary lists for you when hovering the main menu
  // So we want to repeat the initial behavior when done navigating
  $('ul.nice-menu').bind("mouseleave", function(){
    var $active = $('ul.nice-menu li.active-trail ul');

    // Set the timer to the value specified in the admin settings
    // This prevents overlap of the secondary menu items
    // The trick to make it work is that we set the active trail to visible inside the function
    $active.animate({ opacity: 1.0 }, 800, function() {
      $('ul.nice-menu li.active-trail ul').css('visibility', 'visible');
      $('ul.nice-menu li.active-trail ul').show();
    });

  });

});
Jonasvh’s picture

Just do it with CSS
You must only override the elemen.style.
See example of my css

#block-nice-menus-1 .active-trail ul {
display: block !important;
visibility: visible !important;
}

xeelee’s picture

@Jonasvh thank you, i'm using your solution, have one question although, how to make active opened submenu hide while hovering over another submenu, to prevent overlapping?

jamesdixon’s picture

Awesome robinrew, this is exactly what I was looking for! Thanks!

leozzz’s picture

i found a simply solution.

jQuery('ul.nice-menu li.active-trail').unbind();

add it to nice_menu.js

just unbind the active-trail, then the hover/mouseleave bugs will not happen again

final:

jQuery(document).ready(function() {

// Set active-trail visible on page load
// This only sets the secondary list of the active trail to visible
jQuery('ul.nice-menu li.active-trail ul').show();
jQuery('ul.nice-menu li.active-trail ul').css('visibility', 'visible');

// Bind the menu to mouseleave to set active-trail visible when done navigating
// Suckerfish will hide all secondary lists for you when hovering the main menu
// So we want to repeat the initial behavior when done navigating

jQuery('ul.nice-menu li.active-trail').unbind('mouseout');

jQuery('ul.nice-menu').bind("mouseleave", function(){
var jQueryactive = jQuery('ul.nice-menu li.active-trail ul');

// Set the timer to the value specified in the admin settings
// This prevents overlap of the secondary menu items
// The trick to make it work is that we set the active trail to visible inside the function
jQueryactive.animate({ opacity: 1.0 }, 10, function() {
jQuery('ul.nice-menu li.active-trail ul').css('visibility', 'visible');
jQuery('ul.nice-menu li.active-trail ul').show();
});

});

});
trentwyman’s picture

After fighting various bugs and inconsistencies with the recommendations posted above, I found a much simpler solution.

The Persistent Menus Module:
http://drupal.org/project/dynamic_persistent_menu

Persistent Menus always displays the child menu anytime you are on a sub-page and provides very granular classes for theming purposes.

If I had found Persistent Menus sooner, I wouldn't be behind on my deadline now :(

*NOTE: As of this date, Persistent Menus does not have a release for D7.

RachelIsland’s picture

Issue summary: View changes

The simple CSS code Jonasvh provided works perfectly for me. Thanks a lot!

avpaderno’s picture

Title: Show Child menu of "active-trail" parent. » Show Child menu of "active-trail" parent
Version: 6.x-2.1 » 6.x-2.x-dev
Status: Active » Closed (outdated)
Issue tags: -active-trail, -nice menus

I am closing this issue, since Drupal 4.x, 5.x, and 6.x are now not supported.