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.
Note that these files may now be out of day and there could be newer versions.
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 Menu
Then 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:
stylesheets[all] = sf/css/superfish.css
stylesheets[all] = sf/css/theme.css
scripts = sf/js/superfish.js
One more coding step and we're there - add this snippet to the head of your page.tpl.php file:
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!
|Superfish archive (zip)||5.6 KB|
Last updated 22nd April, 2012 - 1:05am