Shape 5 Flex Menu Plugin Tutorials

1. Support a. 2. Please visit our forum boards at shape5.com if you have any unanswered questions after you have completed this tutorial. Overview a. The S5 Flex Menu system is a very powerful plugin that provides functionality far beyond what the standard Joomla menu system can provide. This plugin is intended to be as an extension of the existing menu system in Joomla to add many new features. This plugin may only be used with Shape5 templates specifically designed around this plugin. If a template is compatible with this plugin it will be specified on the template's demo page at http://demo.shape5.com. 3. Installing the Plugin a. If you have installed a Shape5 template using a site shaper the S5 Flex Menu plugin is already included and installation is not necessary. If you have installed a template into an existing Joomla installation then installation is required for the menu system to perform correctly. b. In Joomla 1.5's backend navigate to Extensions/Install and Uninstall. In Joomla 1.6 navigate to Extensions/Extensions Manager.

c.

Browse for the plugin's zip file and click Upload & Install

d.

Once the plugin is installed navigate to Extensions/Plugin Manager

e.

Once on the plugin manager page search for "S5 Flex Menu" and enable the plugin

4.

Enabling the Mootools Upgrade Plugin a. b. This step is only necessary if you are using Joomla 1.5. This menu require mootools 1.2 or higher. Navigate to the Extensions/Plugin Manager page as you did above in step #3. On this page search for "Mootools Upgrade" and enable the plugin called "System - Mootools Upgrade".

5.

Where to Configure Menu Items a. b. c. In the backend of Joomla navigate to the "Menus" item across the main menu. Once on this page edit the menu of your choice. The parameters for the S5 Flex Menu will be shown in the backend of any menu item. Simply edit any menu item. When you have entered the edit screen of a menu item you will see a section of parameters on the right side of the page in an accordion style, each with their own titles. The S5 flex Menu settings are found under "S5 Flex Menu Parameters".

The picture above is of Joomla 1.6, the Joomla 1.5 section may appear closer to the top of the accordion.

d. 6.

This section will control how you configure the S5 Flex Menu. The steps below will teach you how to use each of these settings.

Splitting a Menu Into Multiple Columns a. The number of columns shown in a sub menu is controlled by its parent. For example in the picture below you will see six sub menu items shown in two columns. This is because the parent item, "Extensions", is set to show two columns in it's configuration.

Below we see how the "Extensions" item is configured to show two columns.

7.

Publishing a Module to the Menu a. Below you can see that you have the option to display either menu items or modules in the sub area of a parent menu item. In #4 above menu items are being published as children of the item "Extensions". By default a menu will be set to show menu items as their children, however, you may also load module positions as their children. To do this simply select "Module Positions" and then select a position from the select area below that, ie s5_menu1, s5_menu2, s5_menu3, etc.

Once you have selected a module position to load in the sub area simply publish any module to that position from the module manager.

In the picture below you will see a module loaded just below the menu item "Menu Module Example", that menu item is the parent of the module loaded below it.

Below is the configuration of the menu item "Menu Module Example"

All that is needed then is to publish any module to the s5_menu1 position (or whatever position you choose) from the module manager area of Joomla.

8.

Grouping Children Under Their Parent a. Children may be grouped or non-grouped from their parents under the parameter "Group child items?". You may group either menu items or modules. Grouping simply means the children will show in the same area of the parent rather than a new fly out window. You may group modules or menu items. Non-grouped:

Grouped:

9.

Setting Up Sub Text

a.

Sub text can be added to any menu item. It is very easy to setup, simply type the sub text into the parameter below. If you do not with to have sub text simply leave this parameter empty.

10. Adding a Menu Icon a. Menu icons are controlled through the default Joomla menu system. Open the Parameters (Basics) (1.5) or Link Type Options (1.6+) tab and choose any menu image. A set of sample images has been provided at shape5.com and should be loaded into the images/stories folder.

11. Configuring Effects, Menu Selection, Delays and Orientation a. All of these items can be changed from the template configuration page. Simply navigate to Extensions/Template Manager

b.

Once on the template manager page open your template's link by clicking on its title. This will bring you to the template configuration page.

c.

About half way down the page you will find the following parameters

d.

You may adjust these settings to your liking. Below is a definition of each parameter. i. Show or Hide Main Menu? - Setting to hide will completely disable the menu system ii. Menu Name - Choose which menu you would like to display iii. Levels Deep - This number controls how many levels deep you would like the sub menus to appear. Any sub menus after this number will not appear. iv. v. vi. vii. Open Delay - How long do you want the opening javascript effect to last. Hide Delay - How long should a sub menu appear on the page after the mouse has left Opacity - Set the opacity of the menu. 100 is always recommended Orientation - Set the menu to horizontal or vertical. Vertical should only be used if the template has been specifically designed for this layout. viii. Effect - Choose how you would like the sub menus to enter the page.