How to create a mega menu

A mega menu is an expandable menu that contains multiple-level lower-page links, options, and information, all within one single menu. A mega menu makes it easier for visitors to navigate deeper into a site with fewer clicks. The DecoNetwork Website Editor lets you design mega menus with flexible layouts that can be enhanced by the use of icons, graphics, a mix of typographies, and even videos.

To create a mega menu:

This tutorial will show you how to create a mega menu to look like the example design shown above.

1. Click on the DESIGN button in the Website Editor Toolbar.
   
2. Click on the PAGE OPTIONS menu item.

   The PAGE OPTIONS settings are displayed.

   
3. Select an option from the Dropdown menu setting:
   
   • Specify Width (System Pages): makes the drop-down menu customizable and allows you to specify its width.

     Simply drag the sides of the menu container in the Content Area to adjust the width.

   • Content Width (System Pages): makes the drop-down menu customizable and makes its width fit the content.
   • Page Width (System Pages): makes the drop-down menu customizable and makes its width the full width of the page.

   To replicate the example design above, select the Content Width (System Pages) option.

4. Click the Save button at the right of the Page Settings Bar.
5. Click OK in the Saving Page progress popup when saving is complete.
6. Click on the PAGES button in the Website Editor Toolbar.
   
7. Click on the + symbol to expand the Dropdown Menus tab under SYSTEM PAGES.
   
8. Click on the Products menu item.

   The menu is displayed in the Content Area as you would see it when it is expanded, containing default content. The menu for the Products Page contains the Blank Product Categories Widget, using the Grid layout by default.

   

   Click here to learn about the Blank Product Categories Widget.

9. Hover the mouse pointer over the row containing the Blank Product Categories Widget in the Content Area.
10. Click on the down button beside the Widget icon.
11. Select Row Settings from the drop-down menu.
    
12. Select '3' from the Number of fluid columns drop-down list.
    
13. Click OK.
14. In the Content Area, drag the Blank Product Categories Widget into the second column.

15. Click on the Blank Product Categories Widget.

    The Blank Product Categories Settings popup is displayed.

    
16. Enter a new category name into the Panel title field, e.g. 'Apparel'.
17. Select the relevant category from the Category drop-down list. (To replicate the example design above, select Apparel).
18. Click on the Design tab.
    
19. Click on the List layout button.
    
20. Click on the Properties tab.
21. Enter '5' into the Maximum Categories field.
    
22. Click OK.
23. Hover the mouse pointer over the Blank Product Categories Widget.
24. Click on the down button beside the widget icon.
25. Select Clone from the drop-down menu.
    
26. Hover the mouse pointer over the Blank Product Categories Widget clone.
27. Click on the down button beside the widget icon.
28. Select Blank Product Categories Settings from the drop-down menu.
    

    The Blank Product Categories Settings popup is displayed.

29. Enter a new category name into the Panel title field, e.g. 'Bags'.
30. Select the relevant category from the Category drop-down list. (To replicate the example design above, select Bags).
31. Click OK.
32. Hover the mouse pointer over the Blank Product Categories Widget clone.
33. Click on the down button beside the widget icon.
34. Select Clone from the drop-down menu.
    
35. Hover the mouse pointer over the new Blank Product Categories Widget clone.
36. Click on the down button beside the widget icon.
37. Select Blank Product Categories Settings from the drop-down menu.
    

    The Blank Product Categories Settings popup is displayed.

38. Enter a category name into the Panel title field, e.g. 'Headwear'.
39. Select the relevant category from the Category drop-down list. (To replicate the example design above, select Headwear).
40. Click OK.
41. Click on the WIDGETS button in the Website Editor Toolbar.
    
42. Drag the Logos Widget under the BUSINESS section into the first column.

    The Logos Settings popup is displayed.

    
43. Enter a name into the Panel title field. (To replicate the example design above, enter Brands).
44. Select the Product Brands option from the Logo Type drop-down list.
45. Enter '20' into the Maximum Logos field.
    
46. Click on the Design tab.
47. Select 100 from the Logo Size drop-down list.
    
48. Click OK.
49. Hover the mouse pointer over the right border of the first column until the column width handle appears.
    
50. Drag the handle left until the column is wide enough for the logos to form a single column.
51. Hover the mouse pointer over the right border of the second column until the column width handle appears.
52. Drag the handle left until the column is just wide enough for the longest category name to be visible.
53. Click on the WIDGETS button in the Website Editor Toolbar.
54. Drag the Blank Product Listing Widget under the LIST section into the third row in the Content Area.

    The Blank Product Listing Settings popup is displayed.

    
55. Enter a name into the Panel title field. (To replicate the example design above, enter New Arrivals).
56. Select Latest Products from the List Display drop-down list.
57. Enter '8' into the Products Per Page field.
58. Select the Design tab.
    

    On mobile versions of the site, menus can simplified using the Show as Link(s) in Mobile Menu option. When enabled, this option will generate matching links for the content placed in the custom dropdown menu that will be rendered as a simple list of links on the site's mobile menu.

59. Select Don't Show from the Product Colors drop-down list.
60. Select Show Above from the Add to Cart Button drop-down list.
    
61. Click OK.
62. Click on the WIDGETS button in the Website Editor Toolbar.
    
63. Drag the 1 Column Widget under the BASICS section to the bottom of the Content Area.
64. Hover the mouse pointer over the row containing the 1 Column Widget in the Content Area.
65. Click on the down button beside the widget icon.
66. Select Background from the drop-down list.
    
67. Click on the Silver color swatch in the Color Popup.
    
68. Click OK.
69. Click on the WIDGETS button in the Website Editor Toolbar.
70. Drag the Text Widget into the new column.
71. Hover the mouse pointer over the Text Widget.
72. Click on the down button beside the widget icon.
73. Select Text Settings from the drop-down menu.
    

    The Text Settings popup is displayed. The Text Properties tab containing the Rich Text Editor is selected.

    
74. Click on the Image toolbar button in the Rich Text Editor.
    

    The Image Properties popup is displayed.

    
75. Click on the Browse Server button.

    The File Browser is displayed. (The appearance of the File Browser will differ depending on the browser you are using).

76. Upload an image, such as a delivery van in the example, and select it.
77. In the Image Properties popup, click on the Lock Ratio icon.
78. Enter '100' in the Width field.
79. Click OK in the Image Properties popup.
80. Click on the Bold toolbar button in the Rich Text Editor.
    
81. Select 20 from the Font Size drop-down list.
    
82. Click on the Center toolbar button in the Rich Text Editor.
    
83. Override the sample text with the text, "Free shipping with purchases of $50 or more.".
84. Click on the Source toolbar button in the Rich Text Editor.
    
85. Type 'vertical-align: middle;' within the style attribute of the img tag.
86. Click on the Layout Properties tab in the Text Settings Popup.
87. Click on the MARGIN section to expand it.
88. Select Medium from the Top Margin drop-down list.
    
89. Click OK.
90. Click on the Save button and then click OK when saving is complete.
91. Click on the Publish button at the right of the Page Settings Bar and click OK when published.