In this section, we’ll show you how to use NOO menu to create new menu structure. The structure here is what you can’t do with normal WordPress menu: you can divide your submenu into columns and rows as well as adding widget to your menu.
Before you start, you should know about the 3 levels of configuration, they are the option sets that will show to you when you choose the corresponding levels on your menu. We have 3 levels:
- Submenu setting
- Column setting
- Menu Item setting
First we’ll give you the quick look at which options available for each level, then there’re real user cases of how to using NOO Menu to create a Mega Menu.
The Submenu setting will be display when you select the submenu on the toolbox. In the picture bellow, you can see that the submenu has light yellow background and you can trigger the submenu setting when select the most outer boundary of the submenu.
In this level of configuration, you can add rows to your submenu, set the width and change the alignment of your submenu:
- Add row: Add new row to the submenu, new row will be added to the bottom of the current submenu.
- Hide when collapse: On small screen device like mobile, the menu will be collapsed. This option help you choose to display the submenu or not when menu collapsed.
- Submenu Width (px): By default, each column has 200px width, but you change that value by input the width for the submenu here.
- Alignment: Choose how to display the submenu, by the left, right or center of the parent item. With the Justify, the submenu will display full-width. Also, please note that with the Justify, you can’t set the Submenu Width.
- Extra class: Add extra class for easier styling.
Column setting
The Column setting will display when you select one column of your menu. The column is the group of menu items display in a vertical list, and you can see there is a boundary line for each and every column.
In this level of configuration, you can: Add and remove column, set width of each column and add widget to column.
- Add/remove Column: Add a new column to the right of the selected column or Remove the selected column.
- Hide when collapse: On small screen device like mobile, the menu will be collapsed. This option help you choose to display the submenu or not when menu collapsed.
- Width (1-12): Each submenu is divided by a grid of 12 columns, this option allow you to choose the width of the selected column, from 1 to 12.
- Select Widget: choose the widget for the selected column. Please note that this option only work on the new column, which is added by the Add/remove Column option. Also you will notice that there is a link button for adding new Widget to the widget list.
- Extra class: Add extra class for easier styling.
The Menu item setting will display when you select one menu item, either it’s the top level or the sub-level menu item. You can easy spot the menu item because it is the inner most boundary wrapping a Menu label or a widget.
In this level of configuration, you have some setting for the item like: add Icon or add caption (sub-title) for the item. Moreover, you also have control for sub items of the current menu item: enable/disable sub items as well as group the sub items to the current item so that they’ll always be displayed.
- Submenu: If the selected item has submenu, this option allow you to Enable/Disable (show or not) that submenu. If the selected item doesn’t have submenu, choose YES will create new blank sub item for you to add widget.
- Group: This option only available for item that has submenu. It allows you to group submenu to the selected item. The submenu then will always display along with this item.
- Position: Allow you to move selected item to right or left column.
- Extra class: Add extra class for easier styling.
- Icon: Add icon for the menu item. You can input the icon class or click the link to choose icon from popup. In the current version, we only support Awesome Font icons.
- Item Caption: Add the caption (sub-title) for this menu item.