Plugin WP Mega Menu: Functionality, Installation, Setup. Horizontal drop-down menu Super plugin WordPress Max Mega Menu Step
Hey! In my life, as always there is a lot of events, therefore it is very difficult to carve time for the blog. Yesterday we bought tickets to Sri Lanka and soon destroy for 4 months, come to visit! And now I am searching for the most beautiful wedding dress :))
Today we will talk about how to create a menu in WordPress, as well as add data blocks in arbitrary areas of the template.
We will learn to customize the menu and edit it at your discretion.
Editing and setting up the menu in WordPress
To begin with, we will analyze the functionality available to us in the blog panel. In new templates compatible with recent versions WordPress, the menu output is quite simple and the setting is not particularly difficult.
After we have created a subsidiary, in which you can make changes without prejudice to the main topic, add the following function to its Function.php file.
| 1 2 3 | register_nav_menus (array ("additionalmenu" \u003d\u003e __ ("Additional Menu", "Title your topic" ) ) ) ; |
register_nav_Menus (Array ("additionalmenu" \u003d\u003e __ ("Additional Menu", "Your Title")));
If you do not create a subsidiary, add it to the main feature file of your topic.
This feature will allow us to add an additional WordPress menu to our template and create another area for it.
After adding, go to the admin in the "Management of Regions":
There should be an additional area of \u200b\u200bthe topic with the title that we specified in the function.
Click "Use a new menu" if we want to change the sections for an additional area or select "Home". Then the same sections will be displayed in the new area as in Primary Menu.
In our case, create a new menu called Additional:
We choose the area of \u200b\u200bthe topic "ADDITIONAL MENU" for it.
But now we need to tie this area with the blocks of the template. For example, we need to make an additional menu under the site cap on WordPress. We go to the header.php file or copy it to a subsidiary. After the Body tag, add the following:
| 1 2 3 | <dIV ID \u003d "ADDITIONALMENU"\u003e (Array ("Theme_location" \u003d\u003e "ADDITIONALMENU")); ?\u003e</ DIV\u003e |
We look the result:
We have an additional menu above the hat. Now we need to ask the styles for him, align the items in the string and pull the block under the hat.
We introduce the following changes to STYLE.CSS styles:
| 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; / * indents * / margin: 20px 0;) #ADDITIONALMENU (width: 100%; top: 420px; / * Indent from the top edge * / background-color: # 000; / * Background color * / position: relative; ) |
#ADTH: 940px; / * container width * / margin: 0 auto;) #ADDITIONALMENU LI (Display: Inline; padding: 10px; / * indents * / margin: 20px 0;) #additionalMenu (width: 100% ; top: 420px; / * indentation from the top edge * / background-color: # 000; / * background color * / position: relative;)
We look at what happened:
Displaying the menu created by us is still far from the ideal, but, with due, you can bring it to your blog that matches your blog.
Widgets and plugins to add a menu in Wordpress
I offer to view the video about creating a menu in WordPress:
The article about mentioned the "Arbitrary Menu" widget. We will analyze it in more detail.
Come in " Appearance"-" Widgets ", we find the" Arbitrary Menu "widget and drag it to your topic available for your topic and appropriate for the blog area:
In our case, the menu block has been added to Sidebar. For him, we chose the sections created by us by the Additional block.
Accordingly, in the side panel to the right, we will show the following block:
In addition to the built-in standard widget, there are also many additional plugins designed to create different species Menu: vertical, horizontal, falling, etc.
Here, for example, a plugin to create a vertical multi-level menu in WordPress: Navgoco Vertical Multilevel Slide Menu.
Or possessing advanced configuration functions Dropdown Menu Widget widget.
JQWery Effects Widgets are also popular for menu, for example: Jquery Slick Menu Widget.
We will analyze on the example of the principle of its work.
After installing the JQuery Slick Menu Widget widget, go to the "appearance" - "Widgets".
Among the list of available widgets there should be a new one we installed. We move it to the affordable area, in our case Saydbar:
Reveal its settings:
Select the title of the menu (the sections we created), Tab Text - the name of the block that will be displayed on the site, place placement (Select Left - left), Offset - indentation from the top edge in pixels, Animation Speed \u200b\u200bis the animation speed (FAST). You can select Auto-Close Menu so that the unit disappears automatically. And choose the color of the block. Click to save and see the result:
Left in the header there is a retractable menu. When clicking on the tongue, sections appear:
When pressed, the unit will disappear again.
This is just one of the types of installation, editing and output menu in WordPress.
Choose the most acceptable and convenient way Menu creation for your WordPress blog. Good luck!
The menu is the basis of all navigation on the site. Thanks to the menu, the user can quickly navigate on the site and find the information you need. It is quite possible to argue that the site "begins" from the menu, because only this element can give the user an idea of \u200b\u200bthe structure of the Internet resource.
WordPress from the "box" offers quite wide opportunities for working with the menu. Thus, the built-in tools allow you to create one or more menus, with any nestedness, add arbitrary links, etc. But often the owner of the standard tool site is not enough to build a menu that meets all of its requests.
Mega Plugin Max Mega Menu
Usually, developers do not provide for any extended settings for customization of the appearance of the menu on the site. For example, effects in hovering and pressing, etc. Powerful free Max Mega Menu plugin is called to expand the site navigation toolkit and offers the following features for this WordPress user:
- based on standard wordPress system;
- support multiple areas of the menu (each with its configuration);
- ensuring convenient drag and drop with Drag & Drop.;
- the ability to display WordPress widgets in the menu;
- setting up the menu styles using the built-in editor of themes;
- support styles submenu;
- support Hover., Hover Intent or Click. For opening a submenu;
- effects Fade, Fade Up., Slide Up. or Slide. when switching to the submenu;
- ability to add icons to menu items;
- advanced menu item parameters, including "Hide text", “Disable communication ", "Hide on mobile phone” etc.;
- aligning the menu items to the left or right from the line and the parent menu item;
- adaptive design to display on any screen;
- support for different filters / hooks;
- high speed work;
- detailed documentation and forum support.
Setup Max Mega Menu
To begin with the plugin must be installed and activated. Now let's look at what he can. To do this, go to the admin partition Appearance -\u003e Menu. It should be noted that if you have no navigation menu on the site, then create it by adding the necessary items. On how to create on the WordPress menu's website, we told in detail in our past articles. After that, pay attention to the block of options to the left, which is called Settings Max Mega Menu.
In order for the plugin to start its work, the option should be noted Included.
Consider briefly each of the settings.
Setting Event Determines how the menu will fall out at what event.
Effect Responsible for animation appearance and its speed.
In the Options Subject You can select the menu design. By default, there is only one topic. On how to create your own, we will tell below.
Click on it, after which you will open a pop-up window with settings.
In the settings window, divided into three tabs.
Tab Mega menu Allows you to define, the usual menu or menu with widgets will be displayed. If it is selected last, then in the list Submeni display mode You need to specify Mega menu And in the next list, choose the necessary widgets. If the usual menu requires, then you should select Drop-down menu.
Tab Settings Allows you to configure menu items. There are options for text, links, icons, adaptability and other.
On the tab Icon You can set the icon for menu items.
It can be concluded that the settings present in the plugin allow you to flexibly adjust each navigation item separately.
Now you should consider the global settings of the plugin Max Mega Menu.. To do this, go to the admin menu in the section Mega Menu -\u003e Basic Settings. It can be seen that there are all the technical options of the plugin. In principle, they can be left by default. Also here you can set the menu behavior when clicking the mouse, its adaptability, settings CSS. etc.
In chapter Mega Menu -\u003e Topics Menu You can change the existing or create new topic Registration. It can be seen that there is a fairly large number of diverse settings, including color, size, shadow, animation, indents, orientation for computer and mobile view. Also, if necessary, you can use your own CSS.-regulations. The themes created in this way can be applied in the menu editor.
In chapter Mega Menu -\u003e Locations Menu You can create new areas to place the menu. After creating you get a special Php.-Code, which allows you to publish areas anywhere in the site, in the file files, as well as a shortcode, thanks to which the menu area can be added directly to the entry / pages.
Section Mega Menu -\u003e Tools It serves to export / importing previously created, as well as several more technical options (cleaning the cache, full removal All plugin data).
As a conclusion
Plugin. Max Mega Menu. It has a huge number of settings, thanks to which you can make original and colorful navigation on your site.
Please click on one of the buttons to find out the article or not.
I like 1 do not like
Mega Main Menu. This is a plugin to quickly create a menu for WordPress. It has special functionswho facilitate work on it.
- Sticky and drop-down menus, badges, logo and search.
- A variety of colors. And you can change the color of any option in the menu. In addition to colors, gradients, background pictures and images are also used.
- Content has up to 10 variations. You can also put content in the drop-down menu. It may have everything from references to images and shortcodes.
- In the site menu, you can use up to 1600 icons. These icons have vector graphic Therefore, they do not require large volumes and permits. This will allow them to be used even on a cell phone.
- Fonts also have their different variations. It can use 600 Google fonts that can be easily configured in the plug-in settings.
The plugin is established by the usual method, as well as all programs and difficulties does not occur. After you have activated it, then you must go to the main menu. On this menu on the left part you will see four options. This is the main option with common settings, then the option of the appearance of the page called SKINS, which changes the color, font, etc. Also two last options are communication with support and special settings For professionals.
In GENERAL Options There are three under options it is Primary, Mobile_Menu, Secondary. The PRIMARY section serves for settings all the main menu values. For example, there you can set the height, smoothing the icons, configure the image of the logo. In Mobilei Secondary, these settings are played separately. 
In the Skins settings There are also three variations in settings. primary, extra, footer.. In the first version, we can configure the background of the primary container and choose a horizontal, vertical and radial look. Then the font of the first point, etc.
In specific parameters, you can establish a review 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 what to turn off.
So, this is an excellent plug-in menu that can transform your topic. With it, you can easily fill it with icons, pictures and other elements. The main thing, its quality is that it has a light functionality. Unlike other maGa Main Menu plugins It has an insignificant effect on the site.
As far as I understand, under the term mega menu in Wordpress implies a supernunctional huge block with a lot of different elements: lists, pictures, texts, sliders, etc. Surely you met. Someday publish a full-fledged selection on the topic, but today it will be about quite specific decision - Max Mega Menu plugin. I chose it as it has already been tested in work for, it often falls on 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 is converted to a more powerful and functional mechanism with the possibility of adding different kind of widgets, a convenient editor and a bunch of additional settings. Download the plugin from here or look for it through the WP admin.
On the this moment The minimum required version of the system is 3.8, works until the last 4.8.3. Downloads about 100 thousand. I like that in the last 2 months almost 70 different bugs from 89 were corrected, which indicates good activity of the developers.
Main features and chips Max Mega Menu
- Multiple placement places are supported, for each of which you can choose your parameters;
- Easy work with navigation elements via Drag & Drop.
- Adding.
- There is a convenient decoration editor.
- Adding any widgets: pictures, texts, lists, etc.
- Conditioning condition: when hovering, click.
- Submeni output effects: departure, appearance / attenuation, etc.
- Different additional options for hiding text / links or shutdown on mobile version. The last item will help simplify the creation of a separate one.
- Alignment for menu items.
To understand how cool everything is cool and convenient, I advise you just look the following video:
In addition, developers can boast very correct and correctly approach the creation of their decision. WordPress Max Mega Menu is a really high-quality product, here you are a batch of confirmations:
- all design is set using one CSS file.where the "famous" property of Important is not used at all;
- retina support, adaptability, triggering on smartphones and tablets (tested in almost all existing desktop and mobile browsers);
- pure code, JS scripts with gzipped will occupy less than 2kb;
- support for different filters / hooks;
- detailed documentation + unlike many other plug-ins, the forum is supported enough.
Setup and work with Max Mega Menu
Immediately after installation, the section appears in the admin. In the "Basic Settings" you can correct several options regarding the behavior of the submenu, mobile devices, etc. "Themes" look more interesting.
Here are 6 tabs with different chips:
- Main - Choose the type of arrows, shadow, line height, etc.
- Menu Bar - Registration of the main unit: Backgrounds, indents, fonts, guidance.
- Mega Menus - Styles and Settings MEGA MENU.
- Drop-down - similar to the rest of the set of styles.
- Mobile Menu - screen size for triggering and other mobile menu options.
- Custom design - add your CSS styles.
After the basic parameters are set, go to the WP section "Appearance" section - "Menu".
You need to select the menu you want to work with, and then in its settings, put a box next to "Inclusive". Activate Max Mega Menu in WordPress will only work when the display area is specified in the template (cap, footer, sidebar, etc.). There are also parameters of effects and event events.
To open the module editor to bring the cursor to one of the hierarchy items and click on the "Mega Menu" button appeared. In the pop-up window, an appropriate tool will be displayed that you could see in the video presentation of the plugin above.
Here you can, firstly, determine the number of columns, and add any widgets. In addition, it is allowed to change the size of each element. You can choose widgets permitted only in the first (main) navigation level. If you click on the Mega menu button opposite other elements, only for the task of icons and different properties:
Hiding text / link, alignment and disconnection on dexte / mobile - a very useful feature set. It is allowed to specify such options in each menu item. Do not forget to save changes.
Max Mega Menu Pro and conclusions
In general, this development except the repository has a separate site. There are collected descriptions of all the capabilities of the module, presented documentation and its small demo, and there is a link to technical support and loading. The cost of the advanced version of Max Mega Menu Pro, in principle, not so high - for 1/5/99 sites it will cost you $ 23 / $ 35 / $ 99 dollars, respectively. This includes updates and support for the year. If you are a developer, then taking Pro Business License and installing a plugin on 5 sites, get the final value of the solution \u003d 7 dollars!
What is included in Max Mega Menu Pro:
- Integration Google Fonts., Availability FontAwesome and custom icons in the settings.
- Support vertical and accordion type menu.
- Shared logo in navigation + search block.
- Styles of individual items.
- WooCommerce and EDD support.
- The ability to customize.
- Search, icons / logo and HTML for mobile elements.
- Auto update and priority support.
For ordinary classic sites, there is enough ordinary free version Max Mega Menu in WordPress, which is very good for functionality. Different settings There are a lot of here. Also also liked that the developers support their brainchild, relatively quickly correct the current bugs and care about the purity / correct code. The acquaintance will have to spend some time, but it is worth it. To easier to deal with the work of the plugin - watch the video and read the documentation.
And what modules MEGA MENU in WordPress are you using and why? Worked with this decision that you can add on it?
Read 8 min. Posted on 11/01/2016
Hey! We continue to disassemble the most interesting and most useful plugins for WordPress! 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 can fully configure the appearance of the menu and configure the drop-down menu. You can add to the horizontal drop-down menu to 8 eight columns. You can disable the drop-down menu for mobile devices. Very flexible plugin, you can make a super menu!
Install the super plugin you can directly from the WordPress admin panel. Go to: Plugins - Add New, enter the name of the plug-in in the search form, press ENTER, install and activate the plugin.
General Settings .
– Click Event Behaviour, Behavior when clicking. Here you have two options for choice:
- 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 on the link.
- Leave the default, do not change anything.
– Mobile Menu Behaviour, Behavior on mobile menu,
- Standard - Open Sub Menus Will Remain Open Until Closed by The User, Standard - open submenu will remain open until the user closes it.
- Accordion - Open Sub Menus Will Automatically Close When Another One Is Opened, Accordion - open submenu will automatically close when another is open.
– CSS OUTPUT, Leave the default, nothing needs to be changed here.
– MENU ITEM DESRIPTIONS, Enable or disable the description for menu items.
– Active Menu Instances Some topics will display the location of the menu several times on one page. For example, your topic can display the menu arrangement after the main menu, then again for the mobile menu. This parameter can be used to ensure that the Max Mega Menu menu applies only to one of these instances.
– .
Menu Themes. .
– SELECT THEME TO EDIT, Here is the menu that you will edit. You can create and select another menu.
– Theme Title, Menu theme title, Leave the default.
– Arrow You can select an arrow that is displayed in the menu item with the drop-down menu.
– LINE HEIGHT, Line of height.
– Z index, The indicator Z index can be left by default.
– Shadow You can configure the shadow of the menu.
– Hover Transitions, Enable transitions when you hover on menu items.
– RESET WIDGET Styling, Disable Mega Menu widget styles.
Menu Bar. .
– MENU HEIGHT, Menu height.
– Menu Background, Menu background color.
– Menu Padding, Upholstery menu.
– MENU BORDER RADIUS, Radius of the border of the menu.
– Menu Items Align, Location of menu items.
– Menu Item Background, Menu items background color.
– Menu Item Background (Hover), Menu item color background.
– MENU ITEM SPACING, Menu items interval.
– Font Font, color, size, location, family, etc.
– Font (hover), Parameters of font when hovering.
– MENU ITEM PADDING, Upholstery menu items.
– MENU ITEM BORDER, The menu item boundary parameters.
– MENU ITEM BORDER (HOVER), The parameters of the menu item point when hovering.
– MENU ITEM BORDER RADIUS, Radius parameters of the menu item.
– MENU ITEM DIVIDER, Menu separator.
– Highlight Current Item, Allow the current menu item.
Mega Menus. .
– Panel Background, Color background drop-down menu.
– Panel Width, The width of the window of the drop-down menu.
– PANEL PADDING, upholstery.
– PANEL BORDER, Color and size of borders.
– Panel Border Radius, Radius of the border.
– Item Padding., menu item upholstery in the drop-down menu.
Widgets. .
– Heading font, Widget title font parameters in the drop-down menu.
– HEADING PADDING, Upholstery header.
– Heading Margin, Indents from the boundaries of the widget header.
– HEADER BORDER, Bordeur border parameters.
– CONTENT FONT, Font in the widget content.
SECOND LEVEL MENU ITEMS .
– Font The font of the second-level menu items.
– Font (hover), Font when hovering.
– Background (Hover), Background color when hovering.
– Padding upholstery.
– Margin indent.
– BORDER, Border, border.
Third Level Menu Items . The same settings only for third-level menu items.
Flyout Menus. .
– Menu Background, The background color of the falling menu of the second or third level.
– MENU WIDTH, Menu width.
– Menu Padding, upholstery.
– MENU BORDER, the border.
– MENU BORDER RADIUS, Radius of the border.
– Item Background, Menu point background color.
– Item Background (Hover), Point background color when hovering.
– ITEM HEIGHT, Menu item.
– Item Padding, Upholstery.
– Item font, Text font in menu item.
– Item Font (Hover), Font when hovering.
– ITEM DIVIDER, element separator.
Mobile Menu. .
– Toggle Bar Designer, Here it is shown what the menu looks like on mobile devices.
– Responsive Breakpoint Width to go to the mobile menu.
– Toggle Bar Background, Color Background Opening Button Mobile Menu.
– Disable Mobile Toggle, You can disable the menu switch.
– Toggle Bar Height, Mobile Menu Switch Height.
– 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.
Custom Styling.. Here you can add your CSS styles for the menu.
– Save the changes made.
Menu Locations .
- Here you can create a menu area, in which you can add a menu. To create a area for the menu, click on the Add Another Menu Location button.
Menu area You can add to the site using a shortcode or PHP code.
On page: Appearance - Menu - Management regionsYou can add a menu for the area.
Tools. .
– Cache Here you can clear CSS cache, it is not necessary, the cache is automatically cleaned each time the menu is saved.
– Plugin Data, Delete all the plug-in stored in WordPress database. Only in case of removal of the plugin!
– Export Theme You can export the subject of the mega menu in JSON or PHP format.
– Import theme You can import the mega menu theme.
– Enable Put a tick here to enable mega menu.
– Event Here you can choose how the drop-down menu will open.
– Effect, You can select the effect for the drop-down menu.
– Theme Menu theme, default.
After switching on the mega menu, In each widget of the page, when hovering, a button - Mega Menu will appear. Click on this button to configure the drop-down menu for this menu item.
Further, You will have a window. At the top on the right, click on a wide field to select the widget and add it to the menu. At the top to the right you can choose how many columns in the drop-down menu. Widgets can be distributed over the drop-down panel, you can specify which part of the widget will take example 1/2 or 1/3. Click on arrows to the right and left to specify which part will occupy the widget.
To open and configure the widget, Add any content to it, etc., right in the widget, click on the key icon. Configure the widget and save it.
– Hide Text Hide text from menu item.
– Hide Arrow Hide the arrow.
– Hide Item On Mobile, Hide the menu item on mobile devices.
– Hide Item On Desktop, Hide the menu item on computers.
– MENU ITEM ALIGN, Location of the menu item.
– Sub Menu Align, Location of the second level menu.
– Hide Sub Menu On Mobile, Hide the second-level menu on mobile devices.
– Save the changes.
All is ready! Save the menu, go to the site and enjoy the result!
Attention! After switching on the mega menu, your default style will be completely changed. You will need to configure the menu style in the settings, on the tab "Menu Themes".
Have questions? Write a comment! Good luck!