There are a range of important steps to do in order to setup a website using Plazart Framework, and one of them is to configure Megamenu.
Today, let’s learn more about how to use Megamenu.
You can watch the videos for better demonstration.
Plazart Framework uses 3-level Megamenu configuration, including: Menu item setting, Sub-menu item setting and Column setting.
Please make sure you have a menu system ready to use and have Plazart Framework installed in your site.
I. For General Page Layout
1. Menu Item Setting
Please go to Extensions > Template Manager, and open a template layout you want to configure the Megamenu.
Next, in tab “Mega Menu”, please find section “Megamenu Configuration”.
Select a menu to configure, then you will see the menu items of the menu display like this:
After that, please click a menu item, you will see the setting for it.
4 things to notice:
- Submenu: You can set to show/hide sub-menu items of this menu.
- Extra Class: You can add class here. This option is meant to make it more convenient for developers to write css.
- Icon: You can insert icon for the menu item to make it look livelier.
Please follow this link to get the icon you want: http://fontawesome.io/icons/
- Item Caption: You can add a short description for the menu item here.
2. Sub-menu Item Setting
Please click the green area to move to sub-menu item configuration.
You can see the image:
When configuring sub-menu item level, you should pay attention to the following points:
- Add row: You can add more row(s) by clicking “+” button.
If you want to delete a row, please select it and click “−” button.
- Sub-menu Width: You can change the width for the sub-menu items.
- Alignment: You can align the sub-menu items to left, right, center or justify.
- Extra Class: You can add class here. This option is meant to make it more convenient for developers to write css.
3. Column Setting
For this configuration, you should focus on:
- Add/Remove Column: Please click “+” to add a new column.
If you want to remove a column, you need to select the column first, then click “−” button.
After adding a new column, you can configure Width, Module and Extra Class.
- Width: You can set the width of the column (in span).
- Module: Please select a module you want to display in the column.
You can select the available modules.
If not, you can go to Extensions > Module Manager and create a new module/publish an old one.
After that, you can go back to the setting and select the module normally.
Below is an example:
- Extra Class: You can add class here. This option is meant to make it more convenient for developers to write css.
NOTE: If your menu item has quite a lot sub-menu items, you can separate them into columns by changing the position for some of the sub-menu items.
To do this, please select a sub-menu item, then you will see section "Position".
You can move it to the left by clicking the left arrow button and move it to the right by clicking the right arrow button.
After that, you can change the width for each column in Column Configuration normally if you would like to.
Please see the following images as an exapmle:
II. For One Page Layout
For one page, please follow the steps as below to configure Megamenu and watch the video by clicking the following button for more details:
One Page Layout's Megamenu in PLazart Framework
In this article, we take TemPlaza’s Titania template as an example.
Please go to Extensions > Template Manager and open layout “tz_titania_joomla - One page”.
Next, in tab Mega Menu, please select menu “One Page” for section “Megamenu Configuration”.
You can configure like Menu item setting for general page layout.
However, for each menu item, you need to set a position for it in section “Direction”.
In your front end of site, when you click a menu item, the page will automatically scroll to the position you set for it in “Direction”.
I hope that this tutorial helps you use megamenu easily. If you have any problem with it, feel free to contact us for more support.
Thank you for reading and watching :)