MERRY Christmas

20% DISCOUNT

Setup Mega Menu

Mega menu improves the navigability and aesthetics of modern websites. It gives you the ability to build a complex menu in the most user-friendly and versatile manner

Basic setting of Mega Menu

Similar to layout builder, you build a rich content mega menu by drag-and-drop the elements on the left column to the control panel, as the example below

There are 5 elements you drop into your mega menu:

  • Image: insert image from your library
  • Sub-menu: insert the sub-menu of the selected parental menu
  • Module: insert a module within your mega menu
  • Module position: insert all module in the selected position
  • Custom HTML: insert the custom HTML.

With each element, you can configure the setting with the control panel on the right.

Besides, you can configure the mega menu container with this guide:

Step 1: Click on the outer box of the mega menu control panel.

Find mega menu

Step 2: Configure the following setting within the container.

1. Change from default width to fix width. When selecting this option, you can set the width layout and align the content.

2. Set the layout width

3. Align your layout

4. Set padding value for container

5. Set the background color for container

6. Set the background image for container

7. Set up the parameter for background image: Repeat - Size - Attachment - Position

8. Set up the border parameter:

Width - Size - Color

Note: you can also configure the rows and columns (padding, size, etc) setting separately

Popular Mega Menu Layout

Multiple columns with text

This is the most popular layout to use in Mega module since it's easy to build and bring better UX and navigation for visitors.

Example: JSN Venture 2 - Design menu

Multiple column with text

You can configure the mega menu with only Module element to archive the layout:

Multiple column with text layout

The module element assigns with respective menu module, configure as below:

Module menu setting

Menu module with image

This layout has many used, but eCommerce websites favor this layout style because it brings the visual element to their products.

For example: JSN Shine - Pillow niche - Outfit Menu

menu with image

The layout for this build in control panel, with menu module and image.

Menu with image layout

Make sub-menu to multiple-columns with mega menu

To make a menu like below, you need to drag sub-menu in your mega menu and it needs a custom CSS to transform the sub-menu like the demo.

Multiple column with no heading

Step 1: Insert the sub-menu in your mega menu

Submenu

Step 2: Add the CSS code to your custom.css file. To find custom.css file, you can this guide.

@media (min-width: 768px) {

body#sunfw-master ul.sunfw-megamenu-sub-menu ul.sub-menu {

width: 100%;

display: flex;

justify-content: flex-start;

flex-wrap: wrap;

}

ul.sunfw-megamenu-sub-menu ul.sub-menu > li {

flex: 0 0 X%;

flex-flow: column;

}

Note:

  1. X = 100%/ number of the column. For example, if you want to divide your sub menu into 4 columns, so X =100%/4 = 25%
  2. This type of menu is the best used when all of the sub-menu is level 2 menu item.

Learn More

This article is from “Getting Started" series. A series that help new users speed up their development process and utilize every feature in JSN Sun Framework.

Comments (0)

There are no comments posted here yet
Rate this article
(1 Vote)