Superfish Menu

The superfish menu is an easily created drop down menu. Canvas gives you the option of having a superfish or a suckerfish menu on your site. The superfish essentially enables the fade in effect and requires the jQuery library while the suckerfish menu only uses javascript in the case of internet explorer 6 and is delivered using a pure css technique in other browsers.

To select whether to use the superfish or the suckerfish you need to edit the index.php file in Joomla 1.0 or change the template parameter in Joomla 1.5. Please read the setup instructions below because setting up the suckerfish differs depending on the version of Joomla you are using.

If you are using Joomla 1.5 then you achieve the superfish by using the core Joomla menu modules. Otherwise if you are using Joomla 1.0 please see the instructions at the bottom in regards to setting up the extended menu module.

Setting up for Joomla 1.0 or if you want to use the Extended menu module.

1. Install v1.05 for use on Joomla 1.0.5.

2. Install the module by using the Joomla module installer.

3. Publish the module to the user3 position.

4. Disable the module title.

5. Select the menu you want to use.

6. Select flat list as the menu type.

7. Set expand menu to yes.

8. Set use menu template to yes.

9. Set the menu path to superfish/menu.html if its not already set.

Parent/Child menus in Joomla - Setting up the drop down menu in Joomla:

In order for the drop down menu to have child items (eg items that are sub menu items of the main navigation items) you will need to set the menu accordingly in the Joomla backend.

1. In the back end of Joomla navigate to menu ---> main menu (or the name of the menu you selected in the previous step.

2. Create the new menu item as per the usual method. eg choose whether you want it to be a url link, component link, blog category link etc.

3. Write the name of the menu item.

4. Publish the menu item.

5. Set the parent item for the menu item. So if you want to have the menu appear on the main level of the menu then dont select anything here or make sure the menu item is set to top. If you want the menu item to be a sub level menu item then simply select the menu item that already exists that you want the sub level to appear under.

6. Configure any other options that may be relevant for your menu link.

7. Click Save.

If you have followed all of the preceding steps then you should have the sliding superfish happily sliding away on your site. If it isnt working then you'll need to refresh your steps and make sure you didnt miss anythign else.

Here are some screenshots of the admin panel so you can see exactly the way we have created the drop down effect.