0

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

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.

  • As in my previous comment I want to learn how to implement superfish directly into my sub-theme for learning purposes. Thank you for the link and tip of what I should probably use for the template. I will try it soon and comment back if it works or not. – Kevin Carbonaro Aug 8 '11 at 20:05
  • I managed to make it work as required. I have added the following code to html.tpl.php code<script type="text/javascript"> (function($){ $(document).ready(function() { $("#region-menu ul.menu").superfish(); }); })(jQuery); </script> Apologies for the messy code paste but could not manage to format the code in the comment the same as in my original question. – Kevin Carbonaro Aug 9 '11 at 7:54
1

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.

  • I can use Superfish module which would work as I just tried it now but I am learning Drupal Theming and want to implement a drop-down menu directly into my sub-theme. Thank you very much as I did not know about the ready-made module just the same so more knowledge for me :) – Kevin Carbonaro Aug 8 '11 at 19:50
0

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);

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.