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

Question

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.

Answer 1

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.

Answer 2

Here is the code based on the page link that @googletorp sent me:

(function ($) {

  Drupal.behaviors.MyTheme = {
    attach: function(context, settings) {
      $('#navigation ul', context).superfish(function () {

      });
    }
  };

})(jQuery);

The drop down menus are now working in Drupal 7 but I still need to figure out how to add the code for easing, speed and animation...

Answer 3

Just realized that I never posted working code. Here is Drupal 7 code that works:

(function ($) {

Drupal.behaviors.MyTheme = {

attach: function(context, settings) {
$('#navigation ul', context).superfish({

animation: { opacity: 'show', height:'show' },
speed: 250,
autoArrows: false,
dropShadows: false /* Needed for IE */

});
}};

})(jQuery);

Answer 4

Holy Cow,

worked 2 days to solve a similar problem with jquery cycle plugin. The solution is here:

http://drupal.org/node/1043478#comment-4168166

Seams to be a problem with php code. You have to secure the <'> like <\'>