Appearance

Menus (Standard / MegaMenu) ​

The skin offers two types of sub menus: the Standard Menu and the MegaMenu.

Standard Menu ​

The Standard Menu is the default type — sub menus display in a single column, as shown below:

Standard.png

MegaMenu ​

A MegaMenu displays sub menus in multiple columns and can also contain HTML modules or third-party modules, as shown below:

megemenu.png

Click to preview the MegaMenu demo.

Configuring a MegaMenu ​

  1. Click the pages nav in ThemePlugin.

  2. Click the Edit MegaMenu button. Note that MegaMenu can only be set for first-level menu items.

  3. Set Tab Type to Mega menu.

megamenu2.jpg

  1. Basic options:

    • Mega Menu Width — the width of the drop-down panel. Auto: same width as the skin; Custom: a specific number;
    • Mega Menu Position — the position of the drop-down panel. Left / Center / Right aligned with the parent menu item.

  2. Click Add Pane to add any number of panes holding modules, HTML and menus. Each pane supports its own width, margin and border.

panesettings.jpg

  1. When the widths of your panes add up to exactly 100, they will sit on one line.

3pane.jpg

  1. Each pane accepts different kinds of controls:

    • Menu — controls which menu items are shown;
    • HTML — insert HTML code directly;
    • Module — insert an HTML module or a third-party module (such as MegaMenuAddon).

  2. Controls can be reordered by dragging.

sort.jpg

MegaMenuAddon effects ​

The DNNGo_MegaMenuAddon module adds more effects to MegaMenu (multi-column menus, tabs and more) — see the MegaMenuAddon chapter.