By danny englander on

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 JavaScript 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. The part of the code which I think does all the heavy lifting to make this work is:

Drupal.behaviors.mythemeBehavior = function(context) {
  jQuery('#navigation ul').superfish({

Note that my surrounding div id is "#navigation"

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.

⋅ Categories: Drupal 7.x

Comments

danny englander’s picture

danny englander
(he/him)
commented

In case anyone else runs into this issue (which they will no doubt), A user on Stack Overflow suggested I have a look at this page:

http://drupal.org/node/756722

Down toward the bottom there is a section in reference to behaviors. Clearly it shows how different Drupal 7 is in regard to this.

My complete function from Drupal 6 was:

Drupal.behaviors.MyThemeBehavior = function(context) {
 
  jQuery('#navigation ul').superfish({
    animation: { opacity: 'show', height:'show' },
    easing: 'swing',
    speed: 250,
    autoArrows:  false,
    dropShadows: false /* Needed for IE */
  });

};

Now in Drupal 7, based on the code sample from the page above, I did this:

(function ($) {

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

})(jQuery);

The only thing I can't figure out how to do it put the animation, easing and speed code back in but at least the menus are working to a degree.

Danny Englander | Twitter | Instagram

danny englander’s picture

danny englander
(he/him)
commented

Ok Finally got a solution to this:

(function ($) {

Drupal.behaviors.naturalessenceTheme = {

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

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

});

}
};

})(jQuery);

This is a big win as I can use this in all my drupal 7 themes now.

Danny Englander | Twitter | Instagram

Jason10121’s picture

Jason10121 commented

Solved your own problem, then, huh? I think that's funny. :) lol

KrisBulman’s picture

KrisBulman commented

I appreciate that the poster posted the solution to his own problem, it helps others struggling with this same thing!