Mega Menu

Collections

For this example, we created following collections:

1. mainMenu - Contains the names that show on each main menu button label.

2. subMenu - Contains the names that show on each submenu button label. Each submenu item references which main menu item it belongs under.

3. productMenu - Contains information about products. Each item references the submenu item it belongs under.

4. newMenu - Same as the Product collection, but for new products.

5. rangeMenu - Same as the Product collection, but for product ranges.
    

Page Elements

In our site we added the following repeaters that make up the menu:

• mainMenuRepeater - for the main menu buttons.

• subMenuRepeater - for the submenu buttons.

• productRepeater - for displaying the products that belong to a submenu item.

• rangeRepeater - for displaying the product ranges that belong to a submenu item.

• newRepeater - for displaying the new products that belong to a submenu item.

 

Backend Code

In data.jsw we are doing 2 things:

1. Define the menu names - we are doing the actual definition in this single place, and later using the data in a generic way across the rest of the site’s code.

2. Fetching the data for the menus from  stored the collections, and returning this data to the client side.

Page Code

We added the following page code to create the mega menu:

1. iniPage - Call the backend function to query all the menus data.

2. connectDataToRepeatersItems: Loop over all the repeaters and implement the functionality of each one, such as populating images and setting the button’s link.

3. The selectMenu function:

• Defines the different states of the buttons and the data of the repeaters depending on what menu item was clicked.

• Returns data that is filtered to only include information that relates to the current selection.