5.2 Set Up an Asteroid Mega Menu

The Astroid Framework offers three primary benefits over other template systems. The first is the ability to create as many rows and columns as you need to display the products of your online store. The second is a way to easily add custom module positions within those rows and columns. The third is a quickly create mega menus in order to display a lot of products or services in a single top level menu. In this article, we will look at how to create a mega menu with Asteroid. Then in the next article, we will look at how to add rows, columns and module positions with Asteroid.

What is a Mega Menu?
A Mega Menu is a full width drop down menu that allows you to show Products in Categories in a series of columns. Mega menus are the best way to help customers understand the structure of your online store when you have lots of categories and products or services to offer. Here is an example of the Phoca Cart Mega Menu on their Astroid template DEMO site:

01

Planning for a Mega Menu
A Mega Menu consists of one or more top-level or Level 1 menu items. These menu items can be a broad category such as Products or Services. Underneath Level 1 menu items, we need one to four Level 2 menu items. These are sub-categories of our Level 1 menu item. For example, in the mega menu above, Mega Menu is the Level 1 menu item. Blog Type, Layouts and Features are Level 2 sub-categories. Level 3 menu items are typically actual products pages.

 

Turn Phoca Cart Categories and Products into Mega Menu Items
To demonstrate how to create an Astroid Mega Menu, we will create a new top level Phoca Cart Category called Our Cars. Move this category to the top of the categories table.

02

Then add this new category to each of our 9 sample cars. Then view the front end of our website and click on Visit our Shop.

03

Click on the Our Cars category and then copy the link. Then repeat this for all 9 models of cars. Here are my links for these products:

http://localhost/Joomla3/index.php/visit-our-shop/5-our-cars

http://localhost/Joomla3/index.php/visit-our-shop/5-our-cars/7-audi-a5

http://localhost/Joomla3/index.php/visit-our-shop/5-our-cars/8-audi-a8

http://localhost/Joomla3/index.php/visit-our-shop/5-our-cars/9-audi-s3

http://localhost/Joomla3/index.php/visit-our-shop/5-our-cars/1-skoda-octavia

http://localhost/Joomla3/index.php/visit-our-shop/5-our-cars/2-skoda-rapid

http://localhost/Joomla3/index.php/visit-our-shop/5-our-cars/3-skoda-superb

http://localhost/Joomla3/index.php/visit-our-shop/5-our-cars/4-volkswagen-golf

http://localhost/Joomla3/index.php/visit-our-shop/5-our-cars/5-volkswagen-passat

http://localhost/Joomla3/index.php/visit-our-shop/5-our-cars/6-volkswagen-touareg

Create an Our Cars Top Level Menu Item

Go to the Joomla Main Menu and click New. Then Select. For Menu Item type, choose System Links, URL. Then paste the Our Cars category URL in the links box. Type the title Our Cars:

04

Then click Save and New

Create Three Level 2 Place Holder Menu Items
Click on Select. Then for Menu Item Type, click System Links Menu Heading. For Menu Title, type Our Audi Cars. Note that the URL link box does not work for Menu Headings.

05

Place this menu item under the Level 1 menu item called Our Cars. Then click Save and New and creating Menu Headings for Skoda and Volkswagen also placing them under the Level 1 Menu item Our Cars. Here is what our four new menu items look like when we are done:

06

Create Nine Level 3 Product Menu Items
Click New. Then click Select. Then click System Links URL. Title the first car Audi A5. Then copy and paste the Product Link from our links above into the Link box. Assign Our Audi Cars as its parent. Then click Save and New and repeat for the remaining 8 cars.

Now that we have all three levels of menu items created, we are ready to make our Mega Menu.

Click on the Level 1 Menu Item to Edit It
Click Our Cars. Then Astroid Menu Options. Turn on the Mega Menu.

07

Click on Add Row.

08

Because we have three categories of cars, we will choose the three column option which is 4-4-4 above.

09

Click on the left plus sign.

10

You can choose a module or a sub-menu. Choose the first sub-menu called Our Audi Cars. Then click on the middle plus sign and choose Our Skoda Cars. Then click on the right plus sign and choose Our Volkswagen Cars.

Add an optional Subtitle. We will add the sub-title:

Click the arrow to see all cars!

Then click Save and Close. Then View Site.

11

 

How to Change Dropdown Menu Colors

To change the background color, see the Template, Styles, Colors. Dropdown Menu. Below, we have changed the drop down background color to light blue and the active background color to a darker blue:

12

Then click Save, Clear Cache and Preview.

13

 

To make additional changes in the appearance of your mega menu, see the custom css area of Templates, Styles.

What’s next?

In our next article, we will explain how to make a Module Menu using Astroid to add extra rows, columns and module positions.