2

I'm migrating a Drupal6 site to Drupal7.

The v6 site was subthemed in Fusion, and used its bundled Superfish menu js. The init I used that worked was:

$(document).ready(function(){
 $("ul.sf-menu").supersubs({
  minWidth:    12, // min sub-menu width, em
  maxWidth:    27, // max sub-menu width, em
  extraWidth:  1,
 }).superfish({
  hoverClass: 'sfHover',
  speed:       0,   // ms, cref jquery animate()
  delay:       0,   // mouseout delay, ms
  animation:   {opacity:'none',height:'none'},
  autoArrows:  true,
  dropShadows: false,
  disableHI:   true,
 }).supposition();
});

In moving to D7, Superfish has been UN-bundled from Fusion, in favor of using the Superfish module for system-wide support.

I'm using the module's js in some custom markup, and need to init the module & override the module's defaults.

I understand that in D7, we need to init jQuery a bit differently. My 'best shot' so far (which, unfortunately, is NOT working) at reproducting what I had in D6 is:

( function ($) {
        Drupal.behaviors.mySuperFish = {
            attach: function(context, settings) {
                $('.sitemenu-inner .sf-menu ul', context).supersubs({
                    minWidth:    12, // min sub-menu width, em
                    maxWidth:    27, // max sub-menu width, em
                    extraWidth:  1,
                }).superfish({
                    hoverClass: 'sfHover',
                    speed:       0,   // ms, cref jquery animate()
                    delay:       0,   // mouseout delay, ms
                    animation:   {opacity:'none',height:'none'},
                    autoArrows:  true,
                    dropShadows: false,
                    disableHI:   true,
                    dropShadows: false, /* Needed for IE */
                }).supposition();
            }
        };
    })(jQuery);

noting that the targeted div/tag has changed.

With this code in place, Firebug is showing me no errors; then again, I'm seeing no sfHover autoclassing, or any of my Superfish submenu functionality.

What am I still doing wrong here?

0

The JavaScript that you have written for Drupal 6 and 7 does the same thing, only the targets has changed a bit ul.sf-menu vs .sitemenu-inner .sf-menu ul.

This gives a few options as to what could be wrong.

  • You have a different superfish version, that behaves a bit differently
  • Your markup has changed and doesn't work like it did for your Drupal 6 site.

It's hard to debug why you're not getting the desired result, you could try to test out superfish on a static page and see if you can get it working. That will reduce some of the complexity and reduce your problem to a JavaScript/jQuery problem.

0
0

It turns out that your suspicion,

You have a different superfish version

is likely correct(ish). Removing

animation:   {opacity:'none',height:'none'},

from the stanza above fixes the problem; autoclassing, submenu dropdown, etc are all working.

The use of property => 'none', which works just fine in D6, apparently causes an element parsing problem in D7.

Afaict, Superfish hasn't changed, or at least, I haven't found the docs that say it has.

'animation', iiuc, is effectively invoking jQUery's 'animate'. jQuery version has certainly changed from D6->D7. Checking the current api docs for animate(),

" ... In addition to numeric values, each property can take the strings 'show', 'hide', and 'toggle' ..."

And, changing it to either

animation:   {opacity:'show',height:'show'},
animation:   {opacity:'toggle',height:'toggle'},

also does the trick.

I can't find the jQUery version changelog that says the arg list changed; in any case, it DID work with 'none' in D6, it doesn't now with D7 -- until the property arg's corrected.

Thanks.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy