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).
screenshot


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:

screenshot

It is up to the site staff whether to use the smartmenu display option for a text links only menu or not. Where megamenus come in to their own is when the menu needs to show more than standard text links.

Megamenu with text links and image

Documentation about this is coming soon.

Using a wiki page for the megamenu dropdown content

First, a disclaimer: this method is a bit kludgy, and there may be a more elegant solution in the future, but for now this can be used.

Making the menu

On the Admin Menus page (tiki-admin_menus.php), add the menu options normally except for the menu item that is a section (parent) type of a megamenu dropdown. In the example shown, the label for this item is "More" and it has no URL or wiki page name as it is only used to open the dropdown; it doesn't link to anything.

screenshot

The child item (option) below it, rather than having a label, has PluginInclude syntax, indicating the page to display as the dropdown content. The syntax in this case is {include page=Megamenu_dropdown} . The menu option where "URL or ((page name))" usually goes is left empty because this menu option also isn't for navigation, it is just to display the dropdown.

screenshot
The screenshot above shows how the megamenu dropdown actually displays, or tries to, in the option details pop-up.

Making the wiki page

The wiki page for the dropdown content is made the usual way, but some extra steps are needed. The wiki page is being included in a menu item and there is link syntax that needs to be closed before the page content displays. To do this, PluginHTML is used to contain the page content, but the first thing in this plugin's data is "</a>", to complete the link syntax of the menu item. Without this, no links in the dropdown will work properly. (Alternatively, if "Accept HTML" is activated for the page, then PluginHTML doesn't need to be used, and "</a>" can simply be the first thing on the page.)

The page in this example contains Bootstrap grid divs for a row and two columns, and cards containing the "Upcoming events" module and the "Featured Tikis" wiki page (this is the preliminary content of the dropdown at tiki.org in October 2021).

The page definitely needs to begin with the "</a>" tag. There are no other restrictions, but the standard layout methods should be used so that the dropdown contents are responsive in small screen sizes.

screenshot

Required custom CSS

As mentioned, this method for the megamenu dropdown is a temporary kludge until changes are made in the code, so some custom CSS needs to be added by the site admin.

Fixing the dropdown colors

The megamenu dropdown, without any added CSS, uses the background and link colors inherited from the navbar and standard menu dropdowns. Depending on the theme and what content is put in the dropdown, these are likely to result in bad color contrast, etc. The example below is from tiki.org, where the theme's light-on-dark colors needed to be replaced by the colors used in wiki pages.

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


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.

Copy to clipboard
/* 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,



Alias names for this page:
megamenu | smartmenus | smart menus | smartmenu | smart menu