WordPress Mega Menu : WP Mega Menu – Documentation

Documentation of WP Mega Menu Plugin

Installation

  1. Unzip wp-mega-menu.zip
  2. Upload all the files to the /wp-content/plugins/wp-mega-menu
  3. Activate the plugin through the ‘Plugins’ menu in WordPress.
  4. To setup default settings, click on WP Mega Menu option menu in WordPress left admin menu.
  5. To display the mega menu or flyout in the frontend, go to backend wordpress menu page, please create menu location if not any exist. Simply add menu from left metabox section and assign those menu to menu location. Then, on same left section, you can see the metabox with title “Select WP Mega Menu Settings” where you can enable mega menu for specific menu location. Similarly, you can also use generated shortcode from shortcode tab in WP Mega Menu left admin menu for any page, post, widget or template pages.

Main Settings

Once the plugin is installed and activated you will find a menu named “WP Mega Menu” in the left menu bar of the admin menu. Once you click on that menu, you will be redirected to the plugin’s Default settings Page. The Basic settings configurations which is individually described below.

Default Main Settings

General settings

This is the main default general setting tab section. Here you can choose default settings for event behavior, menu label animation type, choose default duration time, delay time and iteration count for menu label.

Mobile Settings

This is the settings tab for mobile where you can enable WP Mega Menu on mobile, disable submenu retractor, select default toggle behavior on mobile, choose default toggle menu close and open icons.

Image Settings

Image Settings

In this tab you can set default settings regarding the wordpress image size options, set custom default width as well as menu icon hide/show and define icon width. You can either enable or disable all menu icons. If you want to change the image size according to image shown on specific menus you can even override the settings from specific menu location page.

Shortcode Settings

Shortcode Settings

In this tab you can use shortcode provided in any page, post content editor or widgets area. You can also use php function instead on your template files which specific menu location generated from shortcode tab. In order to display mega menu of specific menu location, firstly, you must need to enable WP Mega Menu from menu page for specific menu location from left section metabox options.

Import

Import Settings

In this tab, you can import the custom theme json file of this plugin.

Export

Export Settings

In this tab, you can export the custom theme json file of this plugin.

Enable Mega Menu Settings

To enable WP Mega Menu for specific menu location, on menu page, you can choose menu location and on left section you can find options settings as Select WP Mega Menu Settings Metabox Options where you can enable wp mega menu, choose orientation as vertical or horizontal, choose trigger effect(show mega menu on hover or on click effect), transition effect(slide or fade type). Also WP Mega Menu has provided 7 Free Pre Available Templates/Skins or you can even setup your own custom theme templates and choose it from this section for specific menu location.
To setup mega menu or flyout type for particular menu. On hover menu you can find WP Mega Menu Button where you can setup options menu wise. In these options, you can set mega menu type sub menu for top level menu only.

Top Level Menu Settings

This level menu includes 6 main settings. This level menu includes following tab options described briefly below:

    • WP Mega Menu Settings

WP Mega Menu Settings

In these Settings, you can set the top level menu as mega menu type or flyout type for its sub menu display. Here, after selecting mega menu type, you can add multiple widgets column wise from “ADD WIDGET” button. You can sort selected widgets in order, automatic save data of widgets from this section.
Below is the image shown after click on add widget button where list of default wordpress widget are listed on one tab, wp mega menu plugin has also provided one contact information widget to display Contact information as our demo section on contact menu for “Our Address” section. And last tab with lists of all WooCommerce widgets.

Add Widgets Lists Settings

    • General Settings

General Settings

General Settings, where there is multiple options such as

      • Disable Menu Text : Enabling Disable On Menu Text, the menu text neither the menu description will be not be shown so height is set to 0px.
      • Active link: Active menu link or de-active it from this button.
      • Visible Hidden Menu Text : you can hide visibility but with height of menu being shown by activating this button.
      • Hide Arrow : From this button, you can hide the arrow of top level menu.
      • Hide Menu on Mobile: From this button, you can hide the specific menu on mobile.
      • Hide Menu on Desktop: From this button, you can hide the specific menu on Desktop.
      • Show Menu Icon : On Enable, you can show menu icon selected for specific menu.
      • Active Single Menu : Enable single menu if menu is custom single menu link. Useful for Any Custom Links such as social links. This button must be enable in order to display custom links such as for social icons
      • Menu Item Alignment : Right aligned items will appear in reverse order on the right hand side of the menu bar.
      • Menu Label : Fill menu label here for specific menu item such as Hot!, New!, Update.
      • Sub Menu Alignment : Specially for flyout menu only. With left and right features, right position will show the flyout sub menu on right side whereas left position will show sub menu from left side.
    • Mega Menu Settings

Mega Menu Settings

In these Settings, you can even setup Mega Menu settings for horizontal position and vertical position. In Mega Menu Settings, you can even add extra top and bottom content with only text, only image or use html content to display for mega menu type only.

      • Show Top Section : Enable Top section for mega menu settings.
      • Show Bottom Section : Enable Bottom section for mega menu settings.
      • Show Top Section Type : You can show only text, only image or html content on top section.
      • Show Bottom Section Type : You can show only text, only image or html content on bottom section.
      • Mega Menu Horizontal Positions: Select mega menu position display type for horizontal as full-width, left, right or center type.
      • Mega Menu Vertical Positions: Select mega menu position display type for vertical as full-height or aligned to parent type.
    • Flyout Settings

Flyout Settings

In these Settings, you can even setup Flyout settings for horizontal position and vertical position. In Flyout Settings, you can display for flyout in different positions for horzontal or vertical menu type.

      • Flyout Horizontal Positions: Select Flyout position display type for horizontal submenu as left or right side.
      • Flyout Vertical Positions: Select Flyout position display type for vertical as full-height or aligned to parent type.
    • Menu Replacement Settings

Menu replacement Settings

Similarly, if you want to display menu in search form then you can simply choose Menu replacement Settings options and select search type from dropdown button options where you can add shortcode to display search form as inline toggle left or right position or mega menu type. Simply you can use the provided search shortcode in textarea.

      • Choose Menu Type: For free version, you have search form display on menu with provided shortcodes.There is three layout to display search form.
        1. Inline Search Toggle Left with shortcode:
        [wp_megamenu_search_form template_type=”inline-search” style=”inline-toggle-left”]

        Using this shortcode on textarea, search form will be displayed on inline menu on click from left side.

        2. Inline toggle to Right with shortcode:
        [wp_megamenu_search_form template_type=”inline-search” style=”inline-toggle-right”]
        Using this shortcode on textarea, search form will be displayed on inline menu on click from right side.

        3. MegaMenu On hover/click with shortcode:
        [wp_megamenu_search_form template_type=”megamenu-type-search”]
        Using this shortcode on textarea, search form will be displayed on megamenu type which is displayed below search
        menu icon on click from right side.

    • Icon Settings

Icon Settings

These Settings also contain Icon Settings where you can choose menu icon from multiple font icons sets.
Menu Icon Settings contains 300+ FontAwesome, 160+ Genericon and 100+ Dashicons..

Sub Level Menu Settings

This level menu includes following tab options:

    • Sub Menu Settings

Sub Menu Settings

Sub Menu Settings, where there is multiple options such as described below:

      • Disable Menu Text : Enabling Disable On Menu Text, the menu text neither the menu description will be not be shown so height is set to 0px.
      • Active link : Active menu link or de-active it from this button.
      • Visible Hidden Menu Text : you can hide visibility but with height of menu being shown by activating this button.
      • Hide Arrow : From this button, you can hide the arrow of top level menu.
      • Hide Menu on Mobile: From this button, you can hide the specific menu on mobile.
      • Hide Menu on Desktop: From this button, you can hide the specific menu on Desktop.
      • Show Menu Icon : On Enable, you can show menu icon selected for specific menu.
      • Active Single Menu : Enable single menu if menu is custom single menu link. Useful for Any Custom Links such as social links. This button must be enable in order to display custom links such as for social icons
      • Menu Item Alignment : Only for top level menu options provided.
      • Menu Label : Fill menu label here for specific menu item such as Hot!, New!, Update.
      • Sub Menu Alignment : Specially for flyout menu only.WIth left and right features , right position will show the flyout sub menu on right side whereas left position will show sub menu from left side.
    • Icon Settings

Icon Settings

This Settings also contain Icon Settings where you can choose menu icon from multiple font icons sets.
Menu Icon Settings contains 300+ FontAwesome, 160+ Genericon and 100+ Dashicons.

    • Custom Settings

Custom Settings

In these Settings, you can set sub menu as custom settings type where you can extract the post details such as featured image, show excerpt with your defined length, display author name, category name, date and read more button for post type sub menus. Here, you can even show custom image by choosing custom image and providing custom URL link. Similarly, you can display custom or featured image of particular post type sub menu on different position such as top, left or right or only image type on mega menu.
Custom Settings2

    • Image Settings

Sub Image Settings

In these image settings, you can choose either default image size settings set from Default Image Settings or simply choose different settings from here for particular post type sub menu with featured image or custom image size options.
Also, if you can use custom image on Custom settings then, you can enable to use default custom image size setup before or
fill different image size.
Sub Custom Image Settings

Widgets Information

To display wp mega menu of specific menu location, WP Mega Menu has provided WP Mega Menu Widget on widget page where you can choose particular menu location and set on the widget area. Else you can use provided shortcode generated from shortcode tab on any other page or default Text Widget.
WP Mega Menu Plugin has also provided its own WP Mega Menu Contact Info widgets where you can setup your contact details with mulitple font awesome icon class and any shortcode to display on mega menu.

This documentation tried to cover as much details about plugin to ease your plugin experience. To see screenshots of plugin backend and frontend templates, you can see them here

Available layout Screenshots