Search code examples
javascriptjquerydrupalthemessuperfish

Issues with Drupal 7 main menu, JQuery & Superfish in upgraded theme

I am updating a Drupal 6 theme to Drupal 7. In the Drupal 6 version, I had a nice little menu function which injected JQuery into the Primary menu to make it work as a drop down (+ a preprocess function to get the menu tree) and this worked great.

In the Drupal 7 version of my theme, I call the JavaScripts in my info file as I did in Drupal 6 and looking at the source of my rendered page, it's not injecting into the menu itself. I call the script below as well as the standard superfish.js (which again worked fine in Drupal 6.) 

   Drupal.behaviors.skyBehavior = function(context) {
  /**
   * Superfish Menus
   * http://users.tpg.com.au/j_birch/plugins/superfish/
   * @see js/superfish.js
   */
  jQuery('#navigation ul').superfish({
    animation: { opacity: 'show', height:'show' },
    easing: 'swing',
    speed: 250,
    autoArrows:  false,
    dropShadows: false /* Needed for IE */
  });
};

I belive the line that does all the heavy lifting is: jQuery('#navigation ul').superfish({ (Note that my surrounding div id for the menu is "#navigation" and then <ul> tag starts after that.)

I am running a preprocess function in my Drupal 7 version also to get my menu tree for the Main Menu and I can see the entire tree viewed in Firebug but I can see that the Jquery injected code is missing.

In my Drupal 6 theme I would see:

<ul class="menu sf-js-enabled" style="visibility: hidden; display: none;">... -- and of course mousing over changes "display: none" to "visible".

But in the Drupal 7 version of my theme, all I see in Firebug is: <ul class="menu">...

I don't know a lot about JavaScript so I am hoping this might ring a bell with someone as to how to find a fix. Thanks.

Solution

  • You can take a look at Managing js in Drupal 7 to get you started. The advice is to create a closure, though I don't see how that should effect your code.

    If it doesn't help you can test if the behavior / js file is being run by doing an alert('message') or something similar in the code.