Max Mega Menu is a feature rich WordPress menu plugin. WP Mega Menu plugin: functionality, installation, configuration Fully responsive and mobile menu

Mega Main Menu this is a plugin for quick creation menu for wordpress. It has special features that make it easier to work on it.

Sticky and dropdown menus, icons, logo and search.
Various colors. Moreover, you can change the color of any option in the menu. In addition to colors, gradients are also used, background pictures and images.
Content has up to 10 variations. You can also place content in drop-down menus. It can have everything from links to images to shortcodes.
Up to 1600 icons can be used in the site menu. These icons are vector graphics therefore, they do not require large volumes and permits. This will allow you to use them even on a cell phone.
Fonts also have their own variation. 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 next you have to 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 the support link and special settings for professionals.

In General Options there are three sub options that are primary, mobile_menu, secondary. The primary section is used to set all the main menu values. For example, there you can set the height, anti-aliasing of the icons, customize the logo image. In mobile and secondary, these settings are played separately.

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

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

The last option is to set up 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 it, you can easily fill it with icons, pictures and other elements. The main thing, its quality is that it has easy functionality. Unlike others plugins Mega Main Menu has negligible effect 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've come across them. Someday I will publish a full-fledged selection on the topic, but today we will talk about a very specific solution - the Max Mega Menu plugin. I chose it because I already tested it in work for, it often gets into the lists, plus there is 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 advanced settings. Download the plugin from here or search for it through the WP admin panel.

On the this moment the minimum required version of the system is 3.8, it works up to the latest 4.8.3. About 100 thousand downloads. I like that in the last 2 months almost 70 different bugs out of 89 have been fixed, which indicates good developer activity.

Main functions and features of Max Mega Menu

Several placements are supported, for each of which you can choose your own parameters;
Easy work with navigation elements via Drag&Drop.
Adding .
There is a convenient theme editor.
Adding any widgets: pictures, texts, lists, etc.
Trigger condition: hover, click.
Sub-menu output effects: exit, fade in/fade out, etc.
Various additional options such as hiding text/links or turning off 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, 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 for you:

all the design is set using one css file, where the "famous" important property is not used at all;
Retina support, adaptability, response on smartphones and tablets (tested in almost all existing desktop and mobile browsers);
clean code, JS scripts when gzipped will take less than 2Kb;
support for different filters/hooks;
detailed documentation + unlike many other plugins, the support forum is 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 the "General settings" you can tweak a few options regarding the behavior of the submenu, mobile devices, etc. Much more interesting look "Themes".

There are 6 tabs with different features at once:

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 - a set of styles similar to the rest.
Mobile Menu - screen size for triggering and other mobile menu options.
Custom design - add your own CSS styles.

After the main 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 box next to "Enabled". Activating Max Mega Menu in WordPress will only work when the display area in the template is set for the menu (header, footer, sidebar, etc.). There are also parameters for effects and trigger events.

To open the module editor, hover over one of the hierarchy items and click on the Mega Menu button that appears. The pop-up window will display the corresponding tool, which you could see in the video presentation of the plugin above.

Here you can, firstly, determine the number of columns, as well as add any widgets. In addition, resizing of each element is allowed. Widgets can only be selected in the first (main) level of navigation. 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 very useful set functions. It is allowed to set such options in each menu item. Don't forget to save your changes.

Max Mega Menu Pro and Conclusions

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

What is included in Max Mega Menu Pro:

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

For ordinary classic sites, the usual free version Max Mega Menu in WordPress, which is very good in terms of functionality. different settings there's a lot here. I also liked that the developers support their brainchild, relatively quickly fix the current bugs and take care of the cleanliness / correctness of the code. It will take some time to familiarize yourself, but it's worth it. To make it easier to understand how the plugin works, watch the video and read the documentation.

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

Reading 8 min. Published on 01.11.2016

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

You will be able to fully customize the appearance of the menu and customize the dropdown menu. You can add up to 8 eight columns to the horizontal dropdown menu. You can disable the dropdown menu for mobile devices. A 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 the submenu, the second click closes the submenu;
First click will open a sub menu, second click will follow the link, the first click opens the submenu, the second click opens the link.
Leave the default, don't change anything.

– Mobile Menu Behaviour, 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 the default, nothing needs to be changed here.

– Menu Item Descriptions, enable or disable description 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 setting 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 be editing. You can create and select another menu.

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

– Arrow, you can select the arrow that is displayed in the menu item with a drop-down menu.

– lineheight, height line.

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

– Shadow, menu shadow can be customized.

– Hover Transitions, enable hover transitions on menu items.

– Reset Widget Styling, disable Mega Menu widget styles.

menu bar .

– MenuHeight, menu height.

– Menu Background, menu background color.

– Menu Padding, menu cover.

– Menu Border Radius, menu border radius.

– Menu Item Align, location of menu items.

– Menu Item Background, background color of menu items.

– Menu Item Background (Hover), menu item background color on hover.

– Menu Item Spacing, menu item spacing.

– Font, font options, color, size, position, family, etc.

– Font (Hover), hover font options.

– Menu Item Padding, padding 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, the background color of the dropdown menu.

– Panel Width, the width of the dropdown menu.

– Panel Padding, upholstery.

– Panel Border, border color and size.

– Panel Border Radius, border radius.

– Item Padding, padding the menu item in the drop down menu.

Widgets .

– header Font, widget title font options in the dropdown menu.

– heading padding, header padding.

– heading margin, padding from the borders of the widget title.

– Header Border, border border settings.

– Content Font, font in the widget content.

Second Level Menu Items .

– Font, font of menu items of the second level.

–Font (Hover), hover font.

– background (Hover), hover background color.

– padding, upholstery.

– margin, indent.

– border, border, border.

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

Flyout menus .

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

– Menu Width, menu width.

– Menu Padding, upholstery.

– Menu Border, border.

– Menu Border Radius, border radius.

– Item Background, menu item background color.

– Item Background (Hover), hover item background color.

– ItemHeight, menu item height.

– Item Padding, padding item.

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

– Item Font (Hover), hover font.

– Item Divider, element separator.

mobile menu .

– Toggle Bar Designer, here is how the menu looks like on mobile devices.

– Responsive Breakpoint, width to go to the mobile menu.

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

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

– Toggle Bar Height, the height of the mobile menu switch.

– Mega Menu Columns, how many columns in the drop down menu on the 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, in 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 cleared automatically every time you save the menu.

– Plug Data, delete all plugin data stored 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 for the drop-down menu.

– theme, menu theme, default.

After turning on the mega menu, in each widget of the page, on hover, a button will appear - Mega Menu . Click this button to customize the drop-down menu for that menu item.

Further, you will open a window. At the top right, tap on the wide box to select a widget and add it to the menu. At the top right, you can choose how many columns there will be from the drop-down menu. Widgets can be distributed over the 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 specify which part the widget will occupy.

To open and customize the widget, add some content to it, etc., on the right side of the widget, click on the key icon. Customize 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, location of the second level menu.

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

– Save Changes.

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

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

Do you have any questions? Write a comment! Good luck!

Hey! In my life, as always, there are many events, so it is very difficult to find time for a blog. Yesterday we bought tickets to Sri Lanka and we will fly away for 4 months soon, come visit us! And now I'm looking for the most beautiful wedding dress :))
Today we will talk about how to create a menu in WordPress, as well as add these blocks in arbitrary areas of the template.
We will learn how to customize the menu and edit it as we see fit.

Editing and Customizing Menus in WordPress

First, let's analyze the functionality available to us in the blog admin panel. In new templates compatible with latest versions WordPress, the menu display is quite simple and the setup is not too difficult.

After we have created a child theme that can be modified without affecting the main theme, let's add the following function to its function.php file.

1 2 3

register_nav_menus( array ( "additional menu" => __( "Additional Menu" , "Your Topic Name" ) ) ) ;

register_nav_menus(array("additionalmenu" => __("Additional Menu", "Your Theme Name")));

If you are not creating a child theme, then add it to your theme's main functions file.

This function will allow us to add extra menu WordPress to our template and will create another area for it.

After adding, go to the admin panel in the "Manage areas":

An additional topic area should appear with the title we gave in the function.

Click "Use new menu" if you want to change the sections for the additional area, or select "Home". Then the same sections will be displayed in the new area as in the Primary Menu.

In our case, we create a new menu called Additional:

Select the "Additional Menu" theme area for it.

But now we need to link this area to template blocks. For example, we need to make an additional menu under the header of a WordPress site. Go to the header.php file or copy it to the child theme. Add the following after the body tag:

1 2 3

<div id = "additional menu" > ( array( "theme_location" =>"additional menu")); ?></div>

"additional menu")); ?>

Let's see the result:

We have an additional menu above the header. Now we need to set styles for it, align the items to a line and lower the block under the header.

We make the following changes to the style.css file:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

#additionalmenu nav ( width : 940px ; /* container width */ margin : 0 auto ; ) #additionalmenu li ( display : inline ; padding : 10px ; /* padding */ margin : 20px 0 ; ) #additionalmenu ( width : 100% ; top : 420px ; /* Indent from the top edge */ background-color : #000 ; /* background color */ position : relative ; )

#additionalmenu nav ( width: 940px; /*container width */ margin: 0 auto; ) #additionalmenu li ( display: inline; padding: 10px; /* padding */ margin: 20px 0; ) #additionalmenu ( width: 100% ; top: 420px; /* top margin */ background-color: #000; /* background color */ position: relative; )

Let's see what happened:

The display of the menu we created is still far from ideal, but with due care, you can bring it to the appropriate look for your blog.

Widgets and Plugins for Adding Menus to WordPress

I suggest watching a video on creating a menu in WordPress:

In the article about the widget "Custom menu" was mentioned. Let's analyze it in more detail.

Go to "Appearance" - "Widgets", find the "Custom Menu" widget and drag it to the area available for your theme and suitable for the blog:

In our case, the menu block is added to the sidebar. For it, we have selected sections of the Additional block we created.

Accordingly, the following block will be displayed in the sidebar on the right:

In addition to the standard widget built into the theme, there are also many additional plugins designed to create various types of menus: vertical, horizontal, drop-down, etc.

For example, here is a plugin for creating a vertical multilevel menu in WordPress: Navgoco Vertical Multilevel Slide Menu.

Or the more customizable Dropdown Menu Widget.

Widgets with JQwery effects for menus are also popular, for example: JQuery Slick Menu Widget.

Let's take an example of how it works.

After installing the jQuery Slick Menu Widget, go to "Appearance" - "Widgets".

Among the list of available widgets, a new one, installed by us, should appear. Move it to an accessible area, in our case the sidebar:

Let's open its settings:

We select the name of the menu (sections that we created), Tab Text - the name of the block that will be displayed on the site, the location (we will select Left - on the left), Offset - the indent from the top edge in pixels, Animation Speed - animation speed (Fast). You can select Auto-Close Menu to make the block disappear automatically. And choose the color of the block. Click save and see the result: