Login



Lost Password? Create An Account
Demos

Search Our Knowledgebase

  • Joomla
  • Video
  • WordPress
Or ask a question in our official product support forum boards

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

  1. 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.
  2. In Joomla's backend navigate to Extensions/Extensions Manager.
  3. extensions img
  4. Browse for the plugin's zip file and click Upload & Install
  5. upload and install img
  6. Once the plugin is installed navigate to Extensions/Plugin Manager
  7. extensions plugin manager img
  8. Once on the plugin manager page search for "S5 Flex Menu" and enable the plugin
  9. enable plugin img

Where to Configure Menu Items

  1. In the backend of Joomla navigate to the "Menus" item across the main menu. Once on this page edit the menu of your choice.
  2. The parameters for the S5 Flex Menu will be shown in the backend of any menu item. Simply edit any menu item.
  3. 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".
  4. S5 Flex Menu Parameters
  5. 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.
extensions
Below we see how the "S5 Flex Menu" item is configured to show two columns.
parameters S5 Flex Menu

Publishing a Module to the Menu

  1. 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.
  2. Once you have selected a module position to load in the sub area simply publish any module to that position from the module manager.
Parameters Flex menu
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
S5 Flex Menu
Below is the configuration of the menu item "Menu Module Example"
Parameters Flex menu
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

  1. All of these items can be changed from the template configuration page in the Vertex admin. Simply navigate to Extensions/Template Manager

  2. 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.
  3. click on the Menu tab of Vertex and you will find the following parameters:

  4. 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:

Looking for the largest variety in template designs? Look no more. Never buy 1 theme again. Signups start at just $49 for access to all of our themes.
Send Us An Email
Please send us your questions and we will email you back as soon as we can. Product support questions should be posted in our support forums under the Help menu. Our staff will assist you from there.