Omega Theme and Superfish Menu

Question

I am trying to use superfish menu with Omega 7.x-3.0-rc3 and so far from bits and pieces on the internet I did the following.

1. Create sub-theme from the '\omega\starterkits\omega-xhtml' folder.
2. Add 'regions[superfish_menu] = Superfish Menu' in sub-theme info file.

3. Add the following in the sub-theme info file: (the paths are correct - sf folder is in my sub-theme folder.

   ;Superfish Stuff
   stylesheets[all][] = sf/css/superfish.css
   stylesheets[all][] = sf/css/superfish-navbar.css
   scripts[]          = sf/js/superfish.js
   

4. Add a Menu called 'Top Navigation' to the region with an expandable Menu Item/Sub-Items.

This is where it seems I got stuck...to add the following to page.tpl.php: (I have renamed the div in the code so that it matches the correct Omega region div - region-superfish-menu)

<script type="text/javascript">
  $(document).ready(function() {
   $("#region-superfish-menu ul.menu").superfish();
  }); 
</script>

I cannot seem to make it work as page.tpl.php does not exist in omega theme. Any clues? Thanks for helping!

Kevin

Answer 1

I would also recommend just using the Superfish module. It handles the block and has a nice admin. That said, 2 problems I see in your approach:

1) $ style jQuery does not work in Drupal 7. You can either replace '$' with 'jQuery' or use a wrapper like

(function ($) {
  // Original JavaScript code.
})(jQuery);

See http://drupal.org/update/modules/6/7#javascript_compatibility

2) The template you want for omega is probably html.tpl.php, not page.tpl.php.

Answer 2

Why don't you just use the Superfish module that already integrates Superfish into Drupal. It automatically creates a block to add to any region you wish.

Answer 3

The best way to add code to a jQuery ready function is through Drupal behaviors. You can add a javascript file to your .info, let's call it loadsf.js.

scripts[] = js/loadsf.js

The contents of loadsf.js would be something like this:

(function ($) {

  Drupal.behaviors.superfish = {
    attach: function (context, settings) {
      if ($("#region-superfish-menu ul.menu").length > 0) {
        $("#region-superfish-menu ul.menu").superfish();
      }
    }
  };
})(jQuery);