Add Superfish Drop Menus to Any Theme, Easily
- 11 Comments
- Latest Comment
How to add a Superfish drop menu to Genesis or Adaptivetheme is one of the most common questions I get. Believe when I say I get emails from well intentioned Drupal users on a weekly basis asking me this. So now, please stop emailing me, I relent, heres how its done.
1. Get the Files
First, download the archive attached to this page. Unzip it and place in your theme.
2. Create A New Region
Open up your themes info file and add this to the regions list. If there isn’t one you’ll have to add all the Drupal 6 default regions as well (don’t ask me why), as in the following:
regions[header] = Header Blocks
regions[content] = Main Content
regions[left] = Sidebar Left
regions[right] = Sidebar Right
regions[footer] = Footer
regions[superfish_menu] = Superfish MenuThen add the new region to your themes page.tpl.php, with a wrapper DIV with the CSS id #superfish.
<?php if ($superfish_menu): ?>
<div id="superfish"><?php print $superfish_menu; ?></div>
<?php endif; ?>3. Load the JS and CSS
Back to your themes info file now, add the following:
;Superfish Stuff
stylesheets[all][] = sf/css/superfish.css
stylesheets[all][] = sf/css/theme.css
scripts[] = sf/js/superfish.jsOne more coding step and we’re there - add this snippet to the head of your page.tpl.php file:
<script type="text/javascript">
$(document).ready(function() {
$("#superfish ul.menu").superfish();
});
</script>Right on, now you need to clear the theme registry (go to Performance settings and click Clear Cache Data so the new info file stuff is loaded into the theme registry).
4. Build a Menu and Set it up
This bit is the easy bit - build a new Drupal menu. Set the parent items to be “expanded” in your menu’s configuration screen. See the screenshot below where I’m using the Navigation menu for a test. Then go to the blocks page and add the menu block to the superfish_menu region.
5. Style It
sf/css/theme.css has the colors and is the one you’ll want to be editing. Good luck!
| Attachment | Size |
|---|---|
| Superfish archive (zip) | 5.6 KB |
Drupal Version:
Drupal Development:
Drupal:
Technology:
Social Tags:
Comments
#2 Thanks!
Hi Jeff,
Thanks a 1000 times!
Gone give this a go later on the day. Hope it will make my day :) :)
Thanks again!
Greetings,
Pat.
#3 Hi Jeff, Works like a
Hi Jeff,
Works like a charm !
Thanks mate!
Pat.
#4 Very good tutorial. Waiting
Very good tutorial.
Waiting for some other interesting tutorial.
#5 Thanks for this short but
Thanks for this short but very useful tutorial.
#6 Very easy to follow and very
Very easy to follow and very clear on the steps.
Thank you very much for this awesome quick tutorial about the dropdown menu feature!
#7 tried, but no luck
Jeff,
Great info, as always. Thanks for this excellent tidbit. I tried to dl the .zip file and it’s showing up as a dead link. Am I missing something? Thanks in advance for the help.
#9 Menu problem from administrator side for multilanguage
Problem related to if site is in multi language at that time this superfish menu list all menu items. Means not display only items related language.
it is mainly occur during access menu or content type, content .
can any body help me out to solve this problem ?
Thanks in advance
#11 Menu problem from administrator side for multilanguage
Thank you for quick reply.






#1 Hi, thanks for the
Hi, thanks for the tutorial!
I think it would be helpful to set up the admin interface. :)