Smartmenus Megamenu

The Smartmenus feature (see also https://smartmenus.org) was added to Tiki as an external library in version 19 and was further integrated in Tiki 23 when more support for the megamenu (or mega menu) was added. A megamenu is a menu whose dropdowns aren't limited to containing standard links, or limited to the width of the parent menu item. They can show various kinds of content including images, text, video, and so on, in addition to links, all styled like a web page rather than a standard menu, and can be as wide as the menu or navbar, or even wider, as described below. Megamenus are typically used by websites such as for e-commerce, fashion, news, and so on, to put more content near the top of the page under selectable menu items.

Tiki megamenu content options

These megamenu types are possible in Tiki (referring to the dropdown content)

• Standard text links only
• Standard text links plus an image
• Styled page content via PluginInclude

Megamenu with text links

When the "megamenu" parameter is set for the menu module on the Admin Modules page, the second-level menu items are arranged horizontally (in the large-screen view, and when the parameter "Use static megamenu" is set to "y") and third-level items are displayed vertically, so all items are displayed in one view rather than in separate dropdowns or fly-outs.

Example of a large megamenu of standard links

This is a rather extreme example of a menu with many items in several dropdown levels. This menu was made from a structure of over 400 wiki pages. (The original page names were duplicated and replaced for development and demonstration purposes — fortunately in Tiki it's simple to create this number of pages automatically using a page list in Structures).

The menu module parameters for the example menu are:

• structureId=Big Test
• type=horiz
• bootstrap=y
• navbar_toggle=y
• nobox=y

This produces a menu dropdown that looks like this:

/* Megamenu styles — should be in themes */
.mega-menuinner-container { background: #fff; color: #343a40; } .mega-menuinner-container a {color: #1174a5 !important; } .mega-menu--inner-container a:hover { color: #0a4360 !important; }
{CODE}

For .mega-menu--inner-container, the desired background and text colors need to be specified.
For .mega-menu--inner-container a, the desired link color needs to be specified.
For .mega-menu--inner-container a:hover, the desired link hover color needs to be specified.

There may be other color issues depending on the content of the dropdown, and these can be identified using your web browser's DOM inspector, or post in the Tiki.org forums for help if needed.

Fixing the ability to scroll the dropdown in small screens

Testing showed that megamenu dropdowns that extended below the bottom of small displays were cut off and couldn't be scrolled into view, so a custom CSS rule to restrict the height of the dropdown and add a scrollbar to it can be used to make all the content visible. This CSS is indicated below. As with the other custom CSS values or units, some adjustment might be needed at the site, depending on the dropdown content, etc.

Widening the megamenu dropdown

There are two options for megamenu width implemented so far: The parameter Use Static Megamenu can be either y or n, with y the default. Static megamenu means the dropdown will be the width of the menu, or menu section of the navbar.

(Not static means the dropdown will be the width of a standard menu dropdown. Presumably using this parameter is to have a menu that is standard in terms of dimensions but can contain a variety of content in the dropdowns.)

To have a third option for dropdown widths, custom CSS is needed. Probably later this will be implemented as a feature option but for now custom CSS needs to be added to tiki-admin.php?page=look, in the CSS Customization text area.

/* Megamenu dropdown -- set height and overflow for small screens. */
.navbar-nav .mega-menu--inner-container { max-height: 30vh;  overflow-y: auto; }

/*  Widen megamenu dropdown in medium-sized and larger devices (tablets, 768px and up). */
@media (min-width: 768px) {
.tiki .navbar-nav  .dropdown-menu.mega-menu { width: 80vw !important; margin-left: -20vw !important; } 
.navbar-nav .mega-menu--inner-container {
    max-height: inherit;
    overflow-y: hidden;
} }

/* Override some settings to give megamenu dropdown more page-like layout. */
.navbar .mega-menu--item .container-fluid { display: inherit; max-width: 100%; }
.navbar-nav .mega-menu--item-container { padding: 1.5rem 0 0 0; }

Modify as necessary

The dimensions and page element classes in the custom CSS above were based on a limited amount of testing. Some adjusting might be needed for best results. There will be more testing and improvement of this feature in coming Tiki releases, so less configuring by site admins will be needed,