Hi,

I have some issue to keep my submenu open on click.
I tried some code for superfish.js for drupal 6.

$(function(){
var menu = $("#nav");

menu.find("ul.sf-menu")
.superfish({
delay: 0,
speed: 'fast',
autoArrows: false,
dropShadows: false,
onHide: function(){
if (this.parent().is('.sfPersist')) {
this.show().css('visibility','visible').parent().addClass('sfHover');
}
}
})
.find('li > ul > li').click(function(){
// hide previously persistent children (LOL that just sounds wrong)
menu.find('.sfPersist')
.removeClass('sfPersist sfHover')
.find('> ul').hide().css('visibility','hidden');

// add children that should be persistent
if ($(this).is('.sfSelected')) {
// if previously selected, keep hidden
menu.find('li.sfSelected').removeClass('sfSelected');
} else {
// Hide other selected classes
menu.find('li.sfSelected').removeClass('sfSelected');
// if newly selected, then show
$(this)
.addClass('sfSelected') // remember which one is selected
.parent()
.show().css('visibility','visible')
.parent().addClass('sfHover sfPersist');
}
});
});

However, when the page is loaded, my submenu disapear.
Nothing seem to be wrong in my code (class / id ....) but it still not working.

Comments

mehrpadin’s picture

Hey Romain,

Is it for a NavBar?

Barfly’s picture

yes it' s for a nav-bar.
This code work for my site on drupal 6 but not on drupal 7 !

And I don't know why =(

Someone have an idea?

Countzero’s picture

You have options in superfish to do this :

    Drupal.behaviors.ActiveMenuItem = {
        attach: function(context, settings) {
            $("#your-superfish-ul")
                .superfish({
                    pathClass: 'active-trail',
                    pathLevels:  3,
                })
        }
    }

This worked like a charm on a fresh D7 install.

Countzero’s picture

Continuing on the issue, I have another question. As stated in the doc, a superfish menu should be able to revert to the current state (i.e the state the menu was on page initial load). See here : http://users.tpg.com.au/j_birch/plugins/superfish/#sample4 : the current menu is shown, disappears on another item's hover event, and reappears on hover out.

I don't know if it's a module related issue, but I can't achieve this behaviour. Mean : the classpath is applied correctly on page load (submenu open to the active page), but as soon as I hover on another menu with subitems, the active one disappears and never returns.

Any help would be greatly appreciated.

Thanks for reading.

reno1979’s picture

Hello,

first of all, thank you for this great module!

I use it in Drupal7 (NavBar style) and updated to version 1.8.

I also can't get the submenu to dissapear like described by Countzero.
After clicking a submenu item, the submenu stays open, it wil not go away :(

After changing the path-level (in the module) to give the option 0, and refreshing the cache, I still have no luck....
Please advice, we want to launch the site within two weeks.

Best regards,

Rene

yben’s picture

Hi, where do you add that code? Also, just to clarify, is this to stop submenus from remaining open after they've been clicked?

Countzero’s picture

The whole point of the classpath option is to keep a menu open when one of its children is active.

So I have trouble understanding why you mess with this option if you don't want this behaviour : just don't set the option and you should be done.

rhawkins’s picture

I am also not able to mimic the behavior of "nav-bar style" on this page: http://users.tpg.com.au/j_birch/plugins/superfish/#examples

The submenu does not remain open when on an active sub-item, and I do not see how to make the submenu be horizontal without CSS.

I set a path class in the configuration options, however that option seems broken. When I look at the superfish javascript that is included on the source of my HTML, pathClass is not included.

rhawkins’s picture

Nevermind, I got it. I had set it to use Horizontal instead of NavBar.

Jvon3L’s picture

I have run into the same problem (with the NAVBAR).

I've checked the HTML and noticed the <li> of a parent-menu-item gets the class 'sfHover' when it (or a sub-item) is selected (and the page reloads).

When I hover over another parent-menu-item the class 'sfHover' is removed from the active parent-menu-item (<li>) and the item I hover over gets the class="sfHover". Perfect 'till thus far.

But once I mouse-out, the active parent-menu-item (<li>) doesn't get the class 'sfHover' back.

Yet in the example, at: http://users.tpg.com.au/j_birch/plugins/superfish/#sample4, the active parent-menu-item (<li>) does get the class 'sfHover' back, thus giving the <li> it's active state and revealing the active sub-menu again.

My jQuery call looks like this:

<script type="text/javascript">
jQuery(function(){jQuery('#superfish-1').superfish({pathClass:'active-trail',animation:{opacity:'show'},speed:1,autoArrows:false,dropShadows:false}).sftouchscreen().find('ul').bgIframe({opacity:false});});
</script>

Does anybody have any idea how I can get this fixed?

***********************************************************************************************************

By accident I found the solution (and the cause of the problem) myself.

Before I made instances of the superfish-menu and placed those on my different page-types, instead of duplicating the menu by using the module-configuration options for duplicating the superfish-menu. Once I removed the instances and placed the 'blocks' the module itself created all works as it is supposed to be.

Rechi’s picture

Currently it seems that only NavBar Menus support this feature by default.
I found a dirty workaround to get it to work for vertical Menus:

In superfish.js on line 84 i've changend
pathClass: 'overideThisToUse',
to
pathClass: 'active-trail',
(The Path-Class in the Block settings)

So far it seams to work, but again, not a clean solution.

mehrpadin’s picture

Hey there,

Edit: Those who want the second row to disappear should set the Path class to something other than active-trail, e.g. customclass which can be attached to your preferred menu item using modules like Menu Attributes hence getting the behaviour you see in the demo.

avb’s picture

Version: 7.x-1.8-alpha5 » 7.x-1.8
Status: Needs work » Active

Having the same problem as Countzero, reno1979 and Jvon3L: the navbar is not restored after the menu was hovered.

Maybe it is related to another bug where the inline JS is added twice: http://drupal.org/node/1241188

shinz83’s picture

Those looking to CLOSE the menu should follow Rechis tip, but then change the Path Levels settings to "0" rather than the default "1"

mehrpadin’s picture

Issue summary: View changes
Status: Active » Closed (works as designed)