Joomla Flex menu
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 with the Vertex framework.
Installing the Plugin
- 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. The plugin can be downloaded from our Free Extensions downloads area.
- In Joomla's backend navigate to Extensions/Extensions Manager.
- Browse for the plugin's zip file and click Upload & Install
- Once the plugin is installed navigate to Extensions/Plugin Manager
- Once on the plugin manager page search for "S5 Flex Menu" and enable the plugin
Where to Configure Menu Items
- 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".
- 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
The number of columns shown in a sub menu is controlled by its parent. For example in the picture below you will see four sub menu items shown in two columns. This is because the parent item, "S5 Flex Menu", is set to show two columns in its configuration.
Below we see how the "S5 Flex Menu" item is configured to show two columns.
Publishing a Module to the Menu
- 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. 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. The module is published to s5_menu1
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.
Grouping Children Under Their Parent
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:
Setting up the Sub Text
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 wish to have sub text simply leave this parameter empty. Please note that some themes do have an option to disable subtext under the Theme Specific tab of Vertex.
Adding a Menu Icon
Menu icons are controlled through the default Joomla menu system. Open the Link Type Options tab and choose any menu image. Images are called from the images/stories folder.
Configuring Effects, Menu Selection, Delays and Orientation
- All of these items can be changed from the template configuration page in the Vertex admin. Simply navigate to
Extensions/Template Manager
- 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.
- click on the Menu tab of Vertex and you will find the following parameters:
- You may adjust these settings to your liking. Below is a definition of each parameter.
- Show or Hide Main Menu? - Setting to hide will completely disable the menu system
- Menu Name - Choose which menu you would like to display
- 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.
- 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.
- Effect - Choose how you would like the sub menus to enter the page.
- Onclick For Tablets - The menu will automatically switch from hover to onclick calls if the device is a touch screen device smaller than 970px.
Menu Flexibility
If the menu is wider than the screen itself it will automatically adjust so that nothing is cut off when
viewing it. It will adjust in 2 ways vertically and horizontally. So if the menu is going to get cut off
horizontally it will output and automatically adjust its position. For example the screenshot below shows the menu at full width:
This screenshot shows the same menu adjusting for when then screen width is too narrow. The columns automatically begin to stack on top of each other and display as shown: