Max mega menu vertical menu. How to Style Your Navigation Menu in WordPress

Mega Main Menu This is a plugin for quickly creating menus for WordPress. It has special features that make it easier to work with.

• Sticky and drop-down menus, icons, logo and search.
• Various colors. Moreover, you can change the color of any option in the menu. In addition to colors, gradients, background patterns and images are also used.
• Content has up to 10 variations. You can also place content in drop-down menus. It can contain everything from links to images and shortcodes.
• You can use up to 1600 icons in the site menu. These icons have vector graphics, so they do not require large volumes and resolutions. This will allow you to use them even on a cell phone.
• Fonts also have their own different variations. It can use 600 Google fonts, which can be easily configured in the plugin settings.

The plugin is installed in the usual way, like all programs, and there are no difficulties. Once you have activated it, then you must go to the main menu. On this menu page, you will see four options on the left side. This is the main option with general settings, then the page appearance settings option called skins, which changes the color, font, etc. Also, the last two options are contacting support and special settings for professionals.

In General options There are three options: primary, mobile_menu, secondary. The primary section is used to configure all main menu values. For example, there you can set the height, smoothing of icons, and customize the logo image. In mobile and secondary these settings are reproduced separately.


In Skins settings There are also three settings variations: primary, extra, footer. In the first option, we can customize the background of the primary container and choose horizontal, vertical and radial views. Then the font of the first paragraph, etc.

In specific settings, you can set feedback on portable devices. You can then set the screen resolution and style.

The last option is to configure the site structure. Here you choose which option to enable and which to disable.

So, this is a great menu plugin that can transform your theme. With its help, you can easily fill it with icons, pictures and other elements. The main thing is that its quality is that it has easy functionality. Unlike others Mega Main Menu plugins has a negligible impact on the site.

As far as I understand, the term mega menu in WordPress means a super-functional huge block with many different elements: lists, pictures, texts, sliders, etc. Surely you have met such people. Someday I will publish a full collection on the topic, but today we will talk about a very specific solution - the Max Mega Menu plugin. I chose it because I had already tested it in work for, it often ends up on lists, plus it has one of the most intelligent and constantly developing free (Lite) versions.

Immediately after installing Max Mega Menu in WordPress, your standard navigation will be transformed into a more powerful and functional mechanism with the ability to add various kinds of widgets, a convenient editor and a bunch of additional settings. Download the plugin from here or search for it through the WP admin.

At the moment, the minimum required system version is 3.8, the latest version is currently 4.8.3. There are about 100 thousand downloads. I like that over the past 2 months, almost 70 different bugs out of 89 have been fixed, which indicates good activity from the developers.

Main functions and features of Max Mega Menu

• Several placement locations are supported, for each of which you can choose your own parameters;
• Easy work with navigation elements via Drag&Drop.
• Addition.
• There is a convenient theme editor.
• Adding any widgets: pictures, texts, lists, etc.
• Trigger condition: on hover, click.
• Submenu display effects: departure, appearance/fading, etc.
• Various additional options such as hiding text/links or turning them off on the mobile version. The last point will help simplify the creation of a separate .
• Alignment for menu items.

To understand how cool and convenient all this is, I advise you to just watch the following video:

In addition, the developers can boast of a very correct and correct approach to creating their solution. WordPress Max Mega Menu is a really high-quality product, here are a couple of confirmations:

• all design is set using one CSS file, where the “famous” important property is not used at all;
• Retina support, adaptability, triggering on smartphones and tablets (tested in almost all existing desktop and mobile browsers);
• clean code, JS scripts when gzipped will occupy less than 2Kb;
• support for various filters/hooks;
• detailed documentation + unlike many other plugins, keep the forum quite lively.

Setting up and working with Max Mega Menu

Immediately after installation, a section of the same name will appear in the admin panel. In “Basic Settings” you can adjust several options regarding the behavior of submenus, mobile devices, etc. “Themes” look much more interesting.

There are 6 tabs here with different features:

• Basic - choose the type of arrows, shadows, line height, etc.
• Menu bar - design of the main block: backgrounds, indents, fonts, hover.
• Mega Menus - Mega Menu styles and settings.
• Drop-downs are a set of styles similar to the others.
• Mobile Menu - trigger screen size and other mobile menu options.
• Custom design - add your own CSS styles.

After the basic parameters are set, go to the WP admin section “Appearance” - “Menu”.

You need to select the menu you want to work with, and then in its settings, check the “Enabled” box. You can activate Max Mega Menu in WordPress only when the menu has a display area specified in the template (header, footer, sidebar, etc.). There are also parameters for effects and trigger events.

To open the module editor, hover the cursor over one of the hierarchy items and click on the “Mega Menu” button that appears. A pop-up window will display the corresponding tool, which you may have seen in the video presentation of the plugin above.

Here you can, firstly, determine the number of columns, and also add any widgets. In addition, the size of each element can be changed. You can only select widgets in the first (main) navigation level. If you click on the “Mega Menu” button opposite other elements, then only to set icons and various properties:

Hiding text/link, alignment and disabling on desktop/mobile is a very useful set of functions. It is possible to set such options in each menu item. Don't forget to save your changes.

Max Mega Menu Pro and Conclusions

In general, in addition to the repository, this development also has a separate website. There are descriptions of all the capabilities of the module, documentation and a small demo of it are presented, and there is also a link to technical support and downloads. The cost of the advanced version of Max Mega Menu Pro, in principle, is not so high - for 1 / 5 / 99 sites it will cost you $23 / $35 / $99 dollars respectively. This includes updates and support throughout the year. If you are a developer, then by taking a Pro Business License and installing the plugin on 5 sites, you will get the total cost of the solution = 7 dollars!

What is included in Max Mega Menu Pro:

• Google Fonts integration, FontAwesome and custom icons in settings.
• Supports vertical and accordion menus.
• General logo in navigation + search block.
• Styles of individual items.
• WooCommerce and EDD support.
• Possibility of customization.
• Search, icons/logos and HTML for mobile elements.
• Auto-update and priority support.

For ordinary classic sites, the regular free version of Max Mega Menu in WordPress is quite sufficient, which is very good in functionality. There are a lot of different settings here. I also liked that the developers support their creation, fix current bugs relatively quickly and take care of the cleanliness/correctness of the code. It will take some time to get acquainted, but it will be worth it. To make it easier to understand how the plugin works, watch the video and read the documentation.

Which Mega Menu modules in WordPress do you use and why? Have you worked with this solution, what can you add about it?

The menu is the basis of all site navigation. Thanks to the menu, the user can quickly navigate the site and find the information he needs. It is quite possible to say that the site “begins” with a menu, because only this element can give the user an idea of ​​the structure of the Internet resource.

WordPress out of the box offers quite a wide range of options for working with menus. Thus, built-in tools allow you to create one or several menus, with any nesting, add arbitrary links, etc. But often, standard tools are not enough for a website owner to build a menu that meets all his needs.

Mega plugin Max Mega Menu

Typically, theme developers do not provide any advanced settings for customizing the appearance of the menu on the site. For example, hover and click effects, etc. The powerful free Max Mega Menu plugin is designed to expand the site navigation tools and offers the WordPress user the following features:

• based on the standard WordPress system;
• support for multiple menu areas (each with its own configuration);
• providing convenient drag-and-drop functionality Drag&Drop;
• ability to display WordPress widgets in the menu;
• customize menu styles using the built-in theme editor;
• support for submenu styles;
• support Hover, Hover Intent or Click to open a submenu;
• effects Fade, Fade Up, Slide Up or Slide when going to a submenu;
• the ability to add icons to menu items;
• advanced menu item options including “Hide text”, “Disable connection", “Hide on mobile phone” and so on.;
• aligning menu items to the left or right of the line and parent menu item;
• adaptive design for display on any screen;
• support for various filters/hooks;
• high speed of work;
• Detailed documentation and support forum.

Setting up Max Mega Menu

First, the plugin must be installed and activated. Now let's look at what he can do. To do this, go to the admin section Appearance -> Menu. It should be noted that if you do not yet have a navigation menu on your site, then create one by adding the necessary items. We talked in detail about how to create a menu on a WordPress website in our previous articles. After that, pay attention to the block of options on the left, which is called Max Mega Menu Settings.

In order for the plugin to start working, check the option Included.

Let's briefly look at each of the settings.

Settings Event determines at what event the menu sub-items will appear.

Effect is responsible for animation appearances and its speed.

In option Subject You can choose the menu design. By default there is only one theme. We will tell you how to create your own below.

Click on it, after which a pop-up window with settings will open in front of you.

The settings window is divided into three tabs.

Tab Mega Menu allows you to determine whether a regular menu or a menu with widgets will be displayed. If the latter is selected, then in the list Submenu display mode need to be specified Mega menu and select the necessary widgets in the adjacent list. If you require a regular menu, you should select Drop-down menu.

Tab Settings allows you to customize menu items. There are options for text, links, icons, adaptability and more.

On the tab Icon You can set an icon for menu items.

We can conclude that the settings present in the plugin allow you to flexibly configure each navigation item individually.

Now we should consider more global plugin settings Max Mega Menu. To do this, go to the admin menu in the section Mega Menu -> Basic Settings. It can be seen that there are all sorts of technical options for the plugin. In principle, they can be left as default. Also here you can set the behavior of the menu when you click the mouse, its adaptability, settings CSS and so on.

In chapter Mega Menu -> Themes menu, you can change an existing one or create a new theme. It can be seen that there is quite a large number of different settings, including color, size, shadow, animation, indentation, orientation for computer and mobile views. If necessary, you can also use your own CSS-rules. The themes created in this way can be applied in the menu editor.

In chapter Mega Menu -> Menu Locations You will be able to create new areas to place menus. After creation you will receive a special PHP-code that allows you to publish areas anywhere on the site, in theme files, as well as a shortcode that allows menu areas to be added directly to posts/pages.

Chapter Mega Menu -> Tools serves to export/import previously created themes, and there are also several more technical options (clearing the cache, completely deleting all plugin data).

As a conclusion

Plugin Max Mega Menu has a huge number of settings, thanks to which you can create original and colorful navigation on your site.

Please click on one of the buttons to find out whether you liked the article or not.

I like 1 I don't like

Reading time: 8 minutes. Published 11/01/2016

Hello! We continue to analyze the most interesting and most useful plugins for the WordPress site! Today you will learn about a super useful plugin that will allow you to create a horizontal dropdown menu. You can insert any widgets, text, editor, photos, videos, forms, html code into the drop-down menu.

You will be able to completely customize the appearance of the menu and customize the drop-down menu. You can add up to 8 eight-column columns to a horizontal drop-down menu. You can disable the dropdown menu for mobile devices. Very flexible plugin, you can make a Super menu!

You can install the Super plugin directly from the WordPress admin panel. Go to the page: Plugins – Add new, enter the name of the plugin in the search form, press Enter, install and activate the plugin.

General Settings .

– Click Event Behavior, click behavior. Here you have two options to choose from:

• First click will open a sub menu, second click will close the sub menu, the first click opens a submenu, the second click closes the submenu;
• First click will open a sub menu, second click will follow the link, the first click opens a submenu, the second click on the link.
• Leave it as default, don't change anything.

– Mobile Menu Behavior, behavior on the mobile menu,

• Standard – Open sub menus will remain open until closed by the user, Standard - an open submenu will remain open until the user closes it.
• Accordion – Open sub menus will automatically close when another one is opened Accordion – open submenus will automatically close when another is open.

– CSS Output leave it as default, nothing needs to be changed here.

– Menu Item Descriptions, enable or disable descriptions for menu items.

– Active Menu Instances Some themes will display the menu location multiple times on the same page. For example, your theme might display a menu location after the main menu, then again for the mobile menu. This option can be used to ensure that the Max Mega Menu only applies to one of these instances.

– .

Menu Themes .

– Select theme to edit, This is the menu you will edit. You can create and select a different menu.

– Theme Title, menu theme title, leave it as default.

– Arrow, you can select the arrow that appears in the drop-down menu item.

– Line Height, height line.

– Z Index, Z Index can be left at default.

– Shadow, You can customize the menu shadow.

– hover transitions, enable transitions when hovering over menu items.

– Reset Widget Styling, disable Mega Menu widget styles.

Menu Bar .

– Menu Height, menu height.

– Menu Background, menu background color.

– Menu Padding menu upholstery.

– Menu Border Radius, menu border radius.

– Menu Items Align, location of menu items.

– Menu Item Background, background color of menu items.

– Menu Item Background (Hover), background color of the menu item when hovered.

– Menu Item Spacing, menu item interval.

– Font, font parameters, color, size, location, family, etc.

– Font (Hover) hover font options.

– Menu Item Padding, upholstery of menu items.

– Menu Item Border, menu item border options.

– Menu Item Border (Hover), Menu item border options on hover.

– Menu Item Border Radius, menu item border radius parameters.

– Menu Item Divider, menu separator.

– Highlight Current Item, highlight the current menu item.

Mega Menus .

– Panel Background, dropdown menu background color.

– Panel Width The width of the dropdown menu window.

– Panel Padding, upholstery.

– Panel Border, border color and size.

– Panel Border Radius, border radius.

– Item Padding, menu item padding in a drop-down menu.

Widgets .

– Heading Font, widget title font options in the drop-down menu.

– Heading Padding header padding.

– Heading Margin, paddings from the widget header borders.

– Header Border, border border parameters.

– Content Font, font in the widget content.

Second Level Menu Items .

– Font, second level menu item font.

–Font (Hover) hover font.

– Background (Hover), background color on hover.

– Padding, upholstery.

– Margin, indentation

– border, curb, border.

Third Level Menu Items . The same settings, only for third-level menu items.

Flyout Menus .

– Menu Background, background color of the second or third level drop-down menu.

– Menu Width menu width.

– Menu Padding upholstery.

– Menu Border, border.

– Menu Border Radius, border radius.

– Item Background, menu item background color.

– Item Background (Hover), item background color when hovered.

– Item Height, menu item height.

– Item Padding upholstery item.

– Item Font, font of the text in the menu item.

– Item Font (Hover), hover font.

– Item Divider element separator.

Mobile menu .

– Toggle Bar Designer, This shows what the menu looks like on mobile devices.

– Responsive Breakpoint, width for going to the mobile menu.

– Toggle Bar Background, background color of the mobile menu open button.

– Disable Mobile Toggle, You can turn off the menu switch.

– Toggle Bar Height, mobile menu switch height.

– Mega Menu Columns, how many columns are there in a drop-down menu on a mobile site.

– Menu Background, mobile menu background color.

– Menu Item Height, menu item height.

Custom Styling. Here you can add your own CSS styles for the menu.

– Save your changes.

Menu Locations .

– here you can create menu areas to which you can then add menus. To create an area for the menu, click on the button – Add another menu location.

Menu area you can add to the site using a shortcode or php code.

On the page: Appearance – Menu – Area management, you will be able to add a menu for the area.

Tools .

– Cache Here you can clear the CSS cache, it is not necessary, the cache is automatically cleared every time the menu is saved.

– Plugin Data delete all plugin data saved in the WordPress database. Only if the plugin is removed!

– Export Theme, You can export the mega menu theme in JSON or PHP format.

– Import Theme, You can import the mega menu theme.

– Enable Check the box here to enable the mega menu.

– Event, Here you can choose how the drop-down menu will open.

– effect You can select an effect from the drop-down menu.

– Theme, default menu theme.

After turning on the mega menu, in each page widget, when hovered, a button will appear - Mega Menu. Click this button to configure the drop-down menu for this menu item.

Further, a window will open. At the top right, click on the wide field to select a widget and add it to the menu. At the top right you can select how many columns there will be in the drop-down menu. Widgets can be distributed across a drop-down panel; you can specify which part the widget will occupy, for example 1/2 or 1/3. Click on the right and left arrows to indicate which part the widget will occupy.

To open and configure the widget, add any content to it, etc., on the right side of the widget, click on the key icon. Set up the widget and save it.

– Hide Text, hide text from menu item.

– Hide Arrow, hide arrow.

– Hide item on Mobile, hide menu item on mobile devices.

– Hide item on Desktop, hide menu item on computers.

– Menu item Align, menu item location.

– Sub Menu Align second level menu location.

– Hide sub menu on Mobile, hide the second level menu on mobile devices.

– Save changes.

All is ready! Save the menu, go to the site and enjoy the result!

Attention! After enabling Mega Menu, your default menu style will be completely changed. You will need to customize the menu style in the Settings tab “Menu Themes”.

Still have questions? Write a comment! Good luck!

Dropdown mega menus- a great design find. Site navigation, containing a large number of pages, has always presented a certain problem. Classic static menus a la sitemap grow quickly as the number of pages grows and take up a lot of space. Dynamic drop-down menus can significantly save page space, but usability is sacrificed - navigation requires active and fairly precise mouse operation. Slightly missed and the wrong menu opens.

The impetus for the development of the mega menu concept was probably the ribbon interface of Microsoft Office 2007. This concept is right in the middle between a simple static menu and a dynamic drop-down menu. On the one hand, such a menu is quite informative and intuitive, on the other hand, it significantly reduces the necessary mouse manipulations. By opening, it can use all the available screen space, which allows the user to take in all the items offered in a given context, and, if necessary, hides.

Be that as it may, the mega-menu is now, as they say, in trend and if you still haven’t used it, then it’s worth taking a closer look at it.

UberMenu: WordPress Mega Menu Plugin

This multifunctional plugin can easily be put in first place in this review: what it creates full mega menu, has an incredible number of different options, including controlling the background and font color, font size, etc. And all this is done from a powerful and convenient settings panel.

In addition, the menu also has a number of other great features such as:

• Built-in adaptive grid
• Individually adjust the width of each column and set the default width
• Grouping menu items
• Centering menu items in horizontal rows
• Custom background images
• Scrollable submenus containing a large number of items.

Overall, a very powerful plugin that I highly recommend.

Cost: $19

Mega Main Menu

Very popular and widely used plugin Mega Main Menu knows how to maintain a balance between functionality and simplicity. You have over 10 different tools at your disposal to create drop-down menus that can contain text, images, links and widgets. And besides this - unlimited color settings and over 600 Google fonts.

Cost: $15

Liquida Mega Menu

Liquida Mega Menu- a modern and multifunctional plugin that is suitable for both ordinary users and developers - it can be easily integrated into your own theme.

The plugin offers ample opportunities for menu creation with a modern and stylish design: vertical or horizontal orientation, the ability to be included in menu items links, images and even WooCommerce product cards or Easy Digital Downloads, which can be useful when developing online stores.

Cost: $19

Sky Mega Menu

Three mobile designs, 9 color schemes, custom grid, shapes and 360 vector icons. This set allows Sky Mega Menu to take its rightful place among its peers.

Cost: $6

WP Mega Menu

A plugin from the must have category. Many settings and options, working with categories, subcategories and messages, SEO optimization and two preset color schemes (dark and light), which, however, can be easily changed to your liking.

Cost: $29

NOO Menu

To understand the settings panel NOO Menu you don't even have to read the documentation - everything is so intuitive. With a real-time preview at your fingertips, you can simply change values ​​and move sliders and see the effect produced. The color scheme can be changed completely arbitrarily and each option can be saved under its own name, and the number of these options is unlimited.

The contents of menu items can be text, links, images, videos, forms and various widgets. It uses its own 12-column grid to house it all.

Cost: $15

Hero Menu – Responsive WordPress Mega Menu Plugin

Hero Menu allows you to attach links to posts, categories, external URLs to menu items, and also display blog posts in them along with a featured image. The latest version announces full support for the WooCommerce platform. For convenient work it has a built-in drag-and-drop editor.

The design is modern and stylish and, of course, completely .

Cost: $19

Superfly - Responsive WordPress Menu Plugin

The so-called fly menu- the latest trend in the world of web design. Such a menu quietly “sleeps” in the corner of the page in the form of an icon, taking up virtually no space, and when you hover the cursor, it opens, shifting page elements rather than overlapping them.

One of the representatives of this type of mega-menu is Superfly - Responsive WordPress Menu Plugin. An impressive instrument in both design and performance.

Cost: $22

Toggle Menu

With the growing popularity of mobile devices, pop-up (or contextual) menus are becoming important because they can significantly save screen space.

Toggle menu - very simple, minimalist menu, which, nevertheless, copes well with its main function.

Cost: $5

WP Floating Menu Pro

WP Floating Menu Pro is a 2 in 1 plugin. Menu navigator for a one-page site and menu stickers. What's more: with this plugin you can, at least visually, transform your traditional website into a modern one-pager. WP Floating Menu Pro will provide smooth scrolling from one part of the page to another.

WP Floating Menu Pro offers 13 and 7 different options for page layout, customization, color, content and number of items at the developer's disposal.
For screens with a resolution of less than 480px, it is possible to automatically disable the menu.

Cost: $17

Flexi Menu WordPress Plugin

Flexi Menu offers 5 different, fully customizable menu types: fly menu, wide (page width), wide+descriptions, wide+images, and vertical.

Cost: $14

Max Mega Menu (Free)

Very good plugin with drag-and-drop menu editor and the ability to embed almost any widget into menu items - from contact forms to Google maps.

Capable of automatically converting already existing regular menus into one mega menu with full control over the conversion process and saving or reassigning the corresponding actions.