Add Superfish drop down menu for Drupal 6 Theme
If you want Your Drupal theme to have some nice drop down menu, you can use Superfish. I’ll explain how to install it on your Drupal themes.
- Download Superfish from here.
This zip file contain superfish javascript, css, and image. extract it to your theme folder. Create folder sf inside your theme directory and extract this file there. - Edit yourtheme.info files.
Add superfish javascript and css (optional) to your .info file. If you already have your own css for the drop down menu, you may not add the superfish css to you .info file.
stylesheets[all][] = sf/css/superfish.css
stylesheets[all][] = sf/css/theme.css
scripts[] = sf/js/superfish.js
If you want your superfish menu different from your Primary links, you can add this line in your .info file.
regions[superfish_menu] = Superfish Menu
- If you want to use superfish for you primary links, you can add these lines to your template.php file.
function phptemplate_preprocess_page(&$vars) {
$vars['primary_menu'] = menu_tree(variable_get('menu_primary_links_source', 'primary-links'));
$vars['secondary_menu'] = theme('links', $vars['secondary_links'], array('class' => 'links secondary-links'));
}
This function will load primary links tree to var primary_menu. You will use this primary_menu instead of primary_links in your page.tpl.php file.
If you use superfish for diferent menu, you may not add this function. - Edit your page.tpl.php file
Add these lines in the <head> section.
<script type="text/javascript"><?php /* Needed to avoid Flash of Unstyled Content in IE */ ?> </script>
If you’re using superfish css, you use superfish in the red text. If you have your own css, you replace the red text with the id of your menu css. i.e.
<!-- Script for SUPERFISH -->
<script type="text/javascript">
$(document).ready(function() {
$("#superfish ul.menu").superfish(); });
</script><script type="text/javascript"><?php /* Needed to avoid Flash of Unstyled Content in IE */ ?> </script> <!-- Script for SUPERFISH -->
Add these lines in your drop down menu region:
<script type="text/javascript">
$(document).ready(function() {
$("#mainnav ul.menu").superfish();
});
</script>
<div id="mainnav">
<?php if (isset($primary_links)) : ?>
<?php print $primary_menu; ?>
<?php endif; ?>
</div>or if you are using superfish menu:
<?php if ($superfish_menu): ?><div id="superfish"><?php print $superfish_menu; ?></div>
<?php endif; ?> - Last step is to create your menu and check the expand checkbox in your menu.
Screen Shot:
I’m not using the superfish css in this screen shot. I’m using diferent css.
Thanks for this. Great timing.
Well done brother, please write more …
Promlem!!!
For theme Analytic not work, some problem. Disable the whole css system. Uf!
I don’t understand. Can help me?
For this theme no work!
http://drupal.org/project/analytic :((
@Forcebook
actually, you need to add these lines in your .info files:
stylesheets[all][] = style.css
stylesheets[all][] = sf/css/superfish.css
stylesheets[all][] = sf/css/theme.css
scripts[] = sf/js/superfish.js
Analytic themes don’t insert the style.css files in its .info files because its only use style.css files for all the css.
note: please re-download the sf files. I’ve made some update on the files based on this tutorial.
Hope it works.
Thank you!
I added lines in .info files. 🙂
On other themes work nice, but for http://drupal.org/project/analytic work if add css into orginal css themes.
I will try to download it again and set it.
Thank You for your quick response.
I setup and work well when add stylesheets[all][] = style.css to theme .info.
And probmem was in template.php when add code.
when reneame: function phptemplate_preprocess_page
to: function themename_preprocess_page
Its work well.
Thanks again! :))
yup… for more specific function, you can rename the phptemplate with ur theme name.. Thx Forcebook..
I add some function defined, but not named function with theme name and superfish not work well. Does not matter now, I have now another problem
I have one question for wath Superfish menu gone when enable Tabs module.
I’m noob fo javascript.
PS. I prefer use Drupal as CMS
Only problem was in IE
Good to know this integration in future
Most of your post is the same as like this url :
http://adaptivethemes.com/add-superfish-drop-menus-to-any-theme-easily
i learn from him and some other posts and make some modification because i don’t use the superfish css. I’m using my own css. ^^
i am working with it but it is not displaying the sublinks only the toplinks are being displayed. I have done in the same way but dont know why?
Any help plz………………
check your menu, is it have child menu and already expanded? you have to expand the menu so it can be drop downed..
I just tryyin’ Your tutorial with AT_Koda (Subtheme from Adaptive theme –> http://drupal.org/project/at_koda). I follow Your step to implement drop down menu using default primary menu on this themes but I found nothing change. I’m new in drupal. Can You tell me the way to makes Your tutorial work for that themes?
in the section of page.tpl.php I’ve inserted:
$(document).ready(function() {
$(“#superfish ul.menu”).superfish(); });
Hi alex, sorry for the long reply, I haven’t check on my blog lately.. Do you already follow the steps above? It’s not quite clear what is the problem with ur theme… Thanks
I guess the variable, ‘$superfish_menu’ in the last bit of code should be ‘$primary_menu’.
Otherwise, it worked like magic.
Thanks. :))
you have a feedjit widget and a wordpress.com blog can not javascript,
and you have a widget only with HTML
can you please say me
the code ????
very nice from you
hope of your answer
saarmaja
Hi Saarmaja,
I have another post about how to add a Feedjit to your wordpress blog. Check it out https://ericwijaya.wordpress.com/2009/12/29/life-traffic-feed-feedjit-for-wordpress/
Hi Eric
I have a problem.
I´m using a theme that doesn’t has template.php file.
This is the theme: http://drupal.org/project/id-facta
What do I do in this case? I have to create my own “template.php” file? If yes, what code lines must have? I’m new on drupal (I’m not a themer)
Thanks
Hi Wescley,
You can just create it and insert these lines
function phptemplate_preprocess_page(&$vars) {
$vars['primary_menu'] = menu_tree(variable_get('menu_primary_links_source', 'primary-links'));
$vars['secondary_menu'] = theme('links', $vars['secondary_links'], array('class' => 'links secondary-links'));
}
with opening php tags at first.
Has anyone had any issues with superfish not detecting working javascript correctly in drupal? I get working menus without the ‘sf-javascript-enabled’ class attached to my sf-menu ul. Anyone have this issue or any thoughts as to why this occurs?
thanks for this tuto
but for me it don’t work on Agency Dark theme
no error message
nothing happens!
Cheers.
Was following this tutorial but you never indicated which file to edit when you instruct to input the dode to the main nav drop down menu. I cant find anything like this in the template or page.tpl
PLEASE ADVISE
That you need to input yourself. It is the id of you menu..
Thanks
I’m getting this error:
Fatal error: Cannot redeclare phptemplate_preprocess_page() (previously declared in /home/folioh/public_html/sites/all/themes/beginning/template.php:7) in /home/folioh/public_html/sites/all/themes/beginning/template.php on line 51
Nevermind, I figured it out.
Thanks for the post, but IE 8 output error how to fix?
I did it it worked well but when I create third level elemnt it dosent show up child element any solution ?
have you expand the menu which have child menus?
Great it worked ! I appreciate for your help
ericwijaya I have some issue in ie6 and 7 it gives extra margin every layer
in i8 firefox and chrome look great
Hi Eric Wijaya ,
I have added the menu but menu is not visible in the home. i have customised the default garland theme in this case.
hi. I have devloped a site and this is the link to site is http://isrg.shef.ac.uk/drupal. The problem is I am not getting a drop down in left vertical menu. But if i shift my left bar in the menu region i get a drop down. Is there any way that i can get a drop in my left vertical menu…Please help guys
kalo ngaplikasikan ke zen subtheme gimana?
Please i need a drop down menu for journal crunch…how do i go about it. journal crunch does not support drop down menu using the necessary modules to make that happen. Please quite urgent.
Thanks
Hi spindles,
You can use nice menu modules, modify some of the template file, modify some css and you get your drop down menu for journal crunch. 🙂
Any chance of updating this for drupal 7?
Css load . but drop down menu not working
$(document).ready(function() {
$(“#superfish ul.menu”).superfish();
});
Primary links regions :
‘menu’));
}?>
Hi,
I am using the superfish menu.It is working like a charm but I am facing one problem while themeing my primary link.I have added “$vars[‘primary_menu’] = menu_tree(variable_get(‘menu_primary_links_source’, ‘primary-links’));” in phptemplate_preprocess_page(&$vars) function in template file.It is working well when i used this statement “print $primary_menu” in page.tpl.php.
I want to add my own css class with superfish menu.To achieve this I used this statement theme(‘links’, $primary_menu, array(‘class’ => ‘topMenu clearfix’)) After using this none of primary get displayed.Please assist me on this.
Thanks
Sumit
It’s a pity you don’t have a donate button! I’d most certainly donate to this fantastic blog! I guess for now i’ll settle for bookmarking and adding your RSS feed to my Google account.
I look forward to new updates and will talk about this blog with my Facebook group.
Talk soon!