WordPress Flex Menu
The S5 Flex Menu system is a very powerful addition to the Vertex Framework that provides functionality far beyond what the standard WordPress menu system can provide. This system is intended to work as an extension of the existing menu system in WordPress and to add many new features. This plugin may only be used with Shape5 themes specifically designed with the Vertex framework. If you have installed a Shape5 theme built on the Vertex Framework, the S5 Flex Menu is already included and installation is not necessary.
Where To Configure Menu Items
In the backend of WordPress, navigate to the "Appearance ->Menus" item in the main menu. Once on this page edit the menu of your choice.
[NOTE: You may have to change your screen options to see all the parameters]:
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 expanded the edit area of a menu item, you will see a section of parameters for that item. The S5 flex Menu settings are found under "Show/Hide Flex Menu Options".
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 placing "Column Splitters". For example, in the picture below you will see sub menu items shown in two columns. This is because there is a column splitter below the first 3 items and above the last 3.
Below we see how the "Extensions" item is configured to show two columns.
Publishing a Widget to the Menu
Below you can see that you have the option to change menu items to display widgets. Above the 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 sidebar positions as their children. To do this simply select "Widget" and then select a position from the dropdown below that. Once you have selected a position to load in the sub area simply publish any widget to that position from the Widget manager.
In the picture below you will see a widget loaded just below the menu item Menu Module Example, that menu item is the parent of the widget loaded below it.
Below is the configuration of the menu item Menu Widget Example:
All that is needed then is to publish any widget to the FlexMenu Widget Area 1 position (or whatever position you choose) from the Widgets Management area in WP admin.
Grouping Children Under Their Parent
Children may be grouped by selecting "Group" for the menu item type. Grouping simply means the children will show in the same area of the parent rather than a new fly out list. You may group both widgets and standard menu items.
Setting Up Sub Text
Sub text can be added to any menu item. It is very easy to setup, simply type the sub text into the space below. If you do not wish to have sub text simply leave this area empty.
Adding a Menu Icon
Menu icons are controlled through the default menu system. Open the item Flex Options and click "Set Icon" to upload or select any menu image.
Configuring Effects, Menu Selection, Delays and Orientation
- All of these items can be changed from the theme configuration page in the Vertex admin. Simply navigate the Vertex admin by clicking the "Shape5 theme" menu item in the left side WordPress admin menu.
- 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.
- 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 theme 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.
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: