Superfish Menu

Superfish Menu

The superfish menu is an easily created drop down menu driven by the jQuery javascript library. The Grid template gives you the option of having a superfish or a suckerfish menu on your site simply by activating or disabling the superfish menu option in the template administrator. The superfish essentially creates 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.

The Grid template comes with a wide array of colour styling available. The colour scheme for the menu is set in the template administrator – please see the article on setting up the template for more information on creating and controlling the menu colour scheme.

To select whether to use the superfish or the suckerfish you need set the template parameter in Joomla 1.5 – its set with the Superfish menu by default. Please read the content item regarding the first steps of setting up the Wallpaper template to make sure that jQuery is enabled on your site via the JB Library plugin.

Setting up the Extended menu module.

1. Install Extended Menu module v1.06 for use on Joomla 1.5.

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

3. Publish the module to the module position called menu.

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 anything else.

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

Superfish Menu