Welcome to CM Mega Menu’s documentation!

This documentation helps you know how to install and setup CM Mega Menu on your Joomla! website.

Contents:

Overview

CM Mega Menu is a set of a component (com_cmmegamenu) and a module (mod_cmmegamenu), the component helps you setup a menu and the module helps you display the menu.

CM Mega Menu uses YAMM (Yet another megamenu) which extends Bootstrap’s navigation bar to create mega menu.

You can find demo of YAMM with Bootstrap 2 here and Bootstrap 3 here.

Because Joomla! Menu Manager can’t be used to setup the menu, CM Mega Menu component is built to do this task.

With CM Mega Menu you can do most of what YAMM supports, like section, accordions, pictures,... By combining with other Joomla! extensions you can do whatever you want as long as those extensions support, from display a login form, a contact form, to display videos,...

Technical Requirements

• Joomla! 3.x.x: CM Mega Menu is NOT compatible with Joomla! 1.x.x or 2.x.x, only Joomla! 3.x.x is supported. Please check Joomla! 3’s Technical Requirements for more information.
• Bootstrap 2 or Bootstrap 3: CM Mega Menu is compatible with both Bootstrap 2 and Bootstrap 3.

Installation

Installing CM Mega Menu is very easy just like installing any other Joomla! extensions.

In your Joomla! back-end, you navigate to Extensions -> Extension Manager, click “Browse” button and select the installation package of CM Mega Menu on your computer, click “Upload & Install” button to upload the package to your server and install it.

Upgrading

To upgrade your CM Mega Menu to a newer version, you simply just need to install the new version.

Configuration

In your Joomla!’s back-end, you go to Extensions -> CM Mega Menu to access CM Mega Menu component.

The default page of CM Mega Menu is the list of menus.

On the toolbar there is an “Options” button, you click this button to configure the component.

The menu item is created and managed via AJAX, a notification popup is displayed to let you know the result of the actions or if there is any errors. There are 2 options for this notification feature:

• Notification position: Where notification is displayed.
• Notification’s timeout: How many seconds notification popup is displayed, then it disappears automatcially.

You set “Bootstrap version” option to the Bootstrap version that you use in your front-end.

Menu

In your Joomla!’s back-end, you go to Extensions -> CM Mega Menu to access the list of menus.

Click “New” button on the toolbar to create a new menu.

You need to provide a title for your menu, this title is not visible in front-end.

If you click “Menu items” tab, you receive message “Please save menu before creating menu items for it.”. To be able to create menu items for your menu, you need to save your menu.

Click “Save” button on the toolbar to save your menu. After saving, you see “New Level 1 Item” button to create menu item in “Menu items” tab. Level 1 menu items are the menu items which are displayed in your navigation bar (menu), the menu items in the next levels are displayed in dropdown panel when you click on the level 1 ones.

Clicking “New Level 1 Item” opens a popup to create new menu item. Please check the following sections to know how to create menu item for specific types (accordion, pictures,...).

Ordering number

In menu item’s form there is a field “Ordering”, this where you enter a number to configure what menu item is displayed first.

The menu item which has a bigger ordering number is displayed before another menu item which has a smaller ordering number.

For example, menu item A has 10 as its ordering number, menu item B has 15 as its orderning number, so menu item B is displayed before menu item A.

Sub-level type

When you create a new level 1 menu item, in the form there is a dropdown list “Sub-level type”, it gives you the following options:

• This item doesn’t have child items
• Section
• Accordion
• Classic
• Picture
• Thumbnail
• Media
• HTML
• Article

Once you save a new level 1 menu item, you can not change “Sub-level type” value, this dropdown list is not displayed in the form any more.

The reason of this is every type has its own child quantity, every child menu item has its own configuration, so changing the level 1 menu item’s type to a different one will break its child menu items.

For example, if you change a level 1 menu item which has type “Picture” and has 5 pictures as child menu items to “Article” type, those 5 pictures can’t be used any more, they can’t be merged into article or displayed side by side to article’s content.

So if you want to change “Sub-level type” of a level 1 menu item, the only way is deleting that menu item and its children, then creating a new menu item.

Create and delete menu items

To create a new level 1 you click “New Level 1 Item” button. To create child item of a level 1 item or child item of another child item, you click on the + button next to title. To delete a menu item, you click on the x button next to the title. Below is a screenshot of these buttons:

Classic type

“Classic menu item” is the menu item type which is supported by default in Bootstrap.

Single menu item

To create single menu item which doesn’t have any child menu items. You click “New Level 1 Item” button in menu form to open the form.

• Title: the title of menu item, this title is displayed in menu.
• Joomla! menu item: select a Joomla! menu item which this new menu item is linked to.
• Full width: select “No” as this menu item doesn’t have any children.
• Sub-level type: select “Classic”.
• Status: select “Published” to make this menu item visible in your menu, select “Unpublished” if you want to hide it.
• Ordering: enter your desired ordering number.

Your single menu item is displayed similar to the “Classic” menu item in the below screenshot:

Dropdown menu item

To create menu item which displays its child items in a dropdown, you click “New Level 1 Item” button in menu form to open the form.

• Title: the title of menu item, this title is displayed in menu.
• Joomla! menu item: do not select any Joomla! menu item.
• Full width: select “No” as it is not necessasy to display dropdown in full width of menu.
• Sub-level type: select “Classic”.
• Status: select “Published” to make this menu item visible in your menu, select “Unpublished” if you want to hide it.
• Ordering: enter your desired ordering number.

After saving, click + button next to your new menu item’s title to create its child item.

• Title: the title of menu item, this title is displayed in menu.
• Type: select “Link” if this menu item is a link, select “Divider” if this menu item is a divider (horizontal line) to separate its above and below items.
• Joomla! menu item: do not select any Joomla! menu item.
• Status: select “Published” to make this menu item visible in your menu, select “Unpublished” if you want to hide it.
• Ordering: enter your desired ordering number.

Here is an example of a classic dropdown menu with 4 links and 1 divider:

Section type

Section type displays the menu items which are grouped into sections.

Click “New Level 1 Item” button in menu form to open the form.

• Title: the title of menu item, this title is displayed in menu.
• Joomla! menu item: do not select any Joomla! menu item.
• Full width: select “Yes” if you want to display dropdown panel in full width of menu.
• Sub-level type: select “Secion”.
• Status: select “Published” to make this menu item visible in your menu, select “Unpublished” if you want to hide it.
• Ordering: enter your desired ordering number.

After saving, click + button next to your new menu item’s title to create section.

• Title: the title of section, this title is displayed in dropdown panel.
• Status: select “Published” to make this section and its items visible in your dropdown panel, select “Unpublished” if you want to hide it and its items.
• Ordering: enter your desired ordering number.

Click + button next to your section’s title to create its menu item.

• Title: the title of menu item, this title is displayed in menu.
• Joomla! menu item: select a Joomla! menu item which this menu item is linked to, if there is no Joomla! menu item selected, this menu item is displayed as text.
• Status: select “Published” to make this menu item visible in your menu, select “Unpublished” if you want to hide it.
• Ordering: enter your desired ordering number.

For every menu item, you can create another level of menu item.

Here is an example of 4 sections, “Section 2” has 4 text items instead of links, “Section 4” has a menu item (“List Item 2”) which has child menu items.

Picture type

Picture type displays pictures as menu items.

Click “New Level 1 Item” button in menu form to open the form.

• Title: the title of menu item, this title is displayed in menu.
• Joomla! menu item: do not select any Joomla! menu item.
• Full width: select “Yes” to display dropdown panel in full width of menu.
• Sub-level type: select “Picture”.
• Status: select “Published” to make this menu item visible in your menu, select “Unpublished” if you want to hide it.
• Ordering: enter your desired ordering number.

Click + button next to the title of the menu item which you just create to add new picture.

• Title: the title of the picture, this title is not displayed in your menu.
• Joomla! menu item: select a Joomla! menu item which this picture is linked to.
• Image: select an image file on your site.
• Status: select “Published” to make this menu item visible in your menu, select “Unpublished” if you want to hide it.
• Ordering: enter your desired ordering number.

This is an example of picture type menu item:

Media type

Media type menu item uses Bootstrap’s Media components. With media type menu item, you can display a menu item with a title, a picture and a description.

Click “New Level 1 Item” button in menu form to open the form.

• Title: the title of menu item, this title is displayed in menu.
• Joomla! menu item: do not select any Joomla! menu item.
• Full width: select “Yes” to display dropdown panel in full width of menu.
• Sub-level type: select “Media”.
• Status: select “Published” to make this menu item visible in your menu, select “Unpublished” if you want to hide it.
• Ordering: enter your desired ordering number.

Click + button next to the title of the menu item which you just create to add new media.

• Title: the title of the media, this title is displayed in the dropdown panel.
• Joomla! menu item: select a Joomla! menu item which this media is linked to.
• Image: select an image file on your site.
• Description: enter a description.
• Status: select “Published” to make this menu item visible in your menu, select “Unpublished” if you want to hide it.
• Ordering: enter your desired ordering number.

Here is an example result:

Thumbnail type

Media type menu item uses Bootstrap’s Thumbnail components. With thumbnail type menu item, you can display a menu item with a title, a picture, a description and a button.

Click “New Level 1 Item” button in menu form to open the form.

• Title: the title of menu item, this title is displayed in menu.
• Joomla! menu item: do not select any Joomla! menu item.
• Full width: select “Yes” to display dropdown panel in full width of menu.
• Sub-level type: select “Thumbnail”.
• Status: select “Published” to make this menu item visible in your menu, select “Unpublished” if you want to hide it.
• Ordering: enter your desired ordering number.

Click + button next to the title of the menu item which you just create to add new thumbnail.

• Title: the title of the thumbnail, this title is displayed in the dropdown panel.
• Joomla! menu item: select a Joomla! menu item which this thumbnail is linked to.
• Image: select an image file on your site.
• Button label: enter a text for button.
• Description: enter a description.
• Status: select “Published” to make this menu item visible in your menu, select “Unpublished” if you want to hide it.
• Ordering: enter your desired ordering number.

Example result:

Accordion type

Accordion type uses Bootstrap’s Collapse plugin to display collapsible items.

Click “New Level 1 Item” button in menu form to open the form.

• Title: the title of menu item, this title is displayed in menu.
• Joomla! menu item: do not select any Joomla! menu item.
• Full width: select “Yes” to display dropdown panel in full width of menu.
• Sub-level type: select “Accordion”.
• Status: select “Published” to make this menu item visible in your menu, select “Unpublished” if you want to hide it.
• Ordering: enter your desired ordering number.

After saving, click + button next to your new menu item’s title to create group of collapsible items.

• Title: the title of group, this title is not displayed in dropdown panel.
• Status: select “Published” to make this section and its items visible in your dropdown panel, select “Unpublished” if you want to hide it and its items.
• Ordering: enter your desired ordering number.

Click + button next to your accordion group’s title to create its collapsible item.

• Title: the title of menu item, this title is displayed in menu.
• Content: enter the content of the item.
• Status: select “Published” to make this menu item visible in your menu, select “Unpublished” if you want to hide it.
• Ordering: enter your desired ordering number.

Example result:

HTML type

With HTML type you can display everything your Joomla! configuration and your installed extensions support.

Click “New Level 1 Item” button in menu form to open the form.

• Title: the title of menu item, this title is displayed in menu.
• Joomla! menu item: do not select any Joomla! menu item.
• Full width: select “Yes” to display dropdown panel in full width of menu.
• Sub-level type: select “HTML”.
• Status: select “Published” to make this menu item visible in your menu, select “Unpublished” if you want to hide it.
• Ordering: enter your desired ordering number.

After saving, click + button next to your new menu item’s title to create its child item.

• Title: the title of menu item, this title is not displayed in dropdown panel.
• HTML: enter your HTML’s content.
• Status: select “Published” to make this menu item visible in your menu, select “Unpublished” if you want to hide it.
• Ordering: enter your desired ordering number.

You can add other child items. The child items are displayed side by side.

Here is an example of a HTML menu item with 2 child items. The left item are in bold and in blue font color by using HTML. The right item has a login form by using “Content - Load Modules” plugin to display login module.

Article type

Article type is similar to HTML type, used to display HTML output. The only different is instead of composing your HTML output inside CM Mega Menu’s item, you get and display the content of a Joomla! article.

Click “New Level 1 Item” button in menu form to open the form.

• Title: the title of menu item, this title is displayed in menu.
• Joomla! menu item: do not select any Joomla! menu item.
• Full width: select “Yes” to display dropdown panel in full width of menu.
• Sub-level type: select “Article”.
• Status: select “Published” to make this menu item visible in your menu, select “Unpublished” if you want to hide it.
• Ordering: enter your desired ordering number.

After saving, click + button next to your new menu item’s title to create its child item.

• Title: the title of menu item, this title is not displayed in dropdown panel.
• Article: select a Joomla! article on your site.
• Status: select “Published” to make this menu item visible in your menu, select “Unpublished” if you want to hide it.
• Ordering: enter your desired ordering number.

You can add other child items. The child items are displayed side by side.

The below screenshot is an example of an Article type menu item with 3 articles. The third article has a Youtube video which is displayed by Youtube Everywhere plugin.

Menu module

After creating your menu, you need to use CM Mega Menu module to display the module in your front-end.

You go to Extensions -> Module Manager, search for “CM Mega Menu - Menu”, this is a module which is created automatically when you install CM Mega Menu package.

Click the title of the module to edit.

In “Module” tab, you configure the module like other Joomla! modules (select menu items, select template position,...). In “Options” tab you need to configure the following options:

• Menu: select a menu you want to display.
• Show module’s title on menu: if you select “Yes”, the title of the module is displayed on the left edge of the menu module.
• Title’s link: if you set “Show module’s title on menu” to “Yes”, you can enter a URL here, when visitor clicks module’s title, visitor is taken to this URL.
• Bootstrap debug: this option is only used for developers for debugging, if you set this option to “Yes”, you can add “bootstrap” parameter to your front-end’s URL to display the module in a specific Bootstrap version, “bootstrap=3” is used for Bootstrap 3 debug, while “bootstrap=2” is for Bootstrap 2.

Tools

In your back-end you go to Components -> CM Mega Menu, click “Tools” on the left side menu. At the present time there is only 1 tool for creating a sample menu for demonstration. This sample menu includes all the menu item types available in CM Mega Menu, they could help you in seeing how CM Mega Menu is configured.

There are 4 options you need to provide. When you click “Run this tool” button, a sample menu is created for you.

• Title: the title of sample menu.
• Sample menu item: select a Joomla! menu item, this menu item is assigned to sample menu items.
• Sample article: select a Joomla! article for Article type menu item.
• Sample picture: select an image file on your site to use it for Media, Thumbnail, Picture types.