Drupal- How to add a drop down menu to your website using CSS SuckerFish Menu

A drop down menu can be easily added to you website using basic CSS.

Here we will explain that how to add a drop down menu to your drupal theme using one of the best menu system available- SuckerFish Menu.


Click here to view this in action

1. Get your files from Click here to view this in action” CSS, JS (for IE6 compatibility) and images.

2. Follow the following steps to enable your Dropdown menu, we are assuming that all your menu items are in Primary Menu navigation-

a. Menu Html code

These are basically the <div> Id’s for which css classes are created.
Place the below code page.tpl.php or your node.tpl.php or any specific template.

<div id="top_menu">
 <div class="moduletable_topmenu">
       print phptemplate_get_primary_links();

b. Place the following function in template.php

// Generate menu tree from source of primary links
function phptemplate_get_primary_links() {
  return menu_tree(variable_get('menu_primary_links_source', 'primary-links'));

c. Path to save the css, js and images (can be found in above link “Click here to view this in action”)- drupalInstallation/sites/all/themes/yourTheme/

d. Edit yourTheme.info file in your theme folder– Add the following lines to incude css, js files
stylesheets[all][] = css/top_main_suckerfish.css
scripts[] = js/suckerfish_menu.js

You are done!!!

Just make sure that you follow all of the above steps.

Both comments and pings are currently closed.

16 Responses to “Drupal- How to add a drop down menu to your website using CSS SuckerFish Menu”

  1. Credit for your posting, I will certainly attach this website to my personal rss feeds, a friend just informed me regarding this a while back. this may be the greatest…

  2. Kenny Buresh says:

    Spent my time to read all the comments, but I actually enjoyed the post UncleCode.Com – Technology Blog | How to add a drop down menu to your website using CSS SuckerFish Menu in Drupal . It proved to be very helpful to me and I’m certain to all of the commenters right here! I will grab your feed, please keep on posting!

  3. SANDRA RUSH says:

    Keep working ,great job!

  4. This is useful for my assignment. Thanks you 🙂

  5. Compton says:

    I’m impressed! After reading your post I can tell you are well-informed about your writing. If only I had your writing ability. I look forward to more updates and will be returning.Cheers!

  6. Dog Costume says:

    As the old saying goes…”you learn something new everyday”. 🙂

  7. Thank you for share very nice knowledges. Your web is coolI am impressed by the information that you have on this blog. It shows how well you understand this subject. Bookmarked this page, will come back for more. You, my friend, ROCK! I found just the information I already searched everywhere and just couldn’t find. What a perfect site. Like this website your website is one of my new favs.I like this data presented and it has given me some sort of desire to have success for some reason, so keep up the good work

  8. I hope you will keep updating your content constantly as you have one dedicated reader here.

  9. Delores Nino says:

    Major thankies for the blog article.Really thank you! Great.

  10. SEO says:

    Your post is very interesting. I’ve read your blog for few days now and I trully enjoy your blog. Thank you for your great work!

  11. this is one of the nicest sites I have seen in a while, thanks for not wasting my time with pointless drible that I find on a lot of other sites. Good work.

  12. Great tip! I will add this site to my bookmarks.

  13. Can I download an software which is free fot testing?

  14. pink chi says:

    Thanks for the info. It seems to be up for discussion these days.

  15. Finally a great post regarding the topic, maintain the great work and also I hope to learn far more within you in the time to come.