How to Configure Megamenu of Plazart Framework in a Joomla! site?

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 :)

Safer PHP Version for Joomla 3 – Highly Recomend
Let Us Hear Your Voice

Search Blogs

Latest Blogs

07 August 2019
News
Today, we would like to announce that Jollyany 3.1.2 is already available. This release contains an update on Jollyany framework and some bug-fixes for known issues. Please have a look at all changes that were made in this version. You're better off ...
03 August 2019
Articles
Nowadays, owning a website is an efficient way to not only show the world what services you're providing, but target more potential clients, as well as improve readership. Joomla is a free and professional content management system that offers u...
02 August 2019
News
First of all, our team are so pleased to announce that Fashion Joomla Template 3rd generation has been released as a part of Jollyany. Fashion or Fashion Semona is a template deliberately designed for fashion model agencies. It's a clean, modern...
31 July 2019
Articles
WordPress is truly a massive resource where users can find anything they need to build up an attractive website. In the previous article, we recommended a list of powerful page builder plugins which help users facilitate the website building p...
30 July 2019
News
Hi guys, We're so happy to announce that Jollyany 3.1.0 is already available. This new release comes with a lot of improvements, latest updates, and new awesome features added. Especially, there is another brand-new topic that officially joins Jollya...