# Omega Theme and Superfish Menu

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

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

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

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