Wordpress vertical mega menu. Max Mega Menu – Multifunctional WordPress Menu Plugin

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, backgrounds and images are also used.
• 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, 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 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.

It is widely known that WordPress 3.0 added support for custom menus (custom menus). The thing, in my opinion, is extremely convenient and useful. Actually, that's where this article comes from.

The convenience lies in the fact that now you can create and configure menus directly from the admin panel, adding links by clicking on checkboxes and changing the order of links by simply dragging and dropping. You can add links to pages, categories, and individual posts to the menu. Can create layered menus, you can also add your own arbitrary links to the menu, which WordPress does not know about. In general, complete freedom of action.

However, in order for such "freedom" to be available, let's say, with a slight movement of the mouse, you need to set up the output of an arbitrary menu in the template.

Using such menus will be extremely convenient if you use the WordPress multisite feature, because you can set up different menus for different sites, and use one template for them.

Note: the menu works through the (nav_menu) WordPress taxonomy, and arbitrary (external) links are written to the main posts database table. This approach is more flexible and dynamic, but requires the constant generation of such menus.

Register_nav_menus(array("top" => "Top menu", //Name of the menu location in the template "bottom" => "Bottom menu" //Name of another menu location in the template));

We have now registered 2 menus with IDs "top" and "bottom" with their respective names. Identifiers are needed to use them in the theme, to indicate the place where, through the output function wp_nav_menu() , the menu created in the admin panel will be displayed. We will see the names of the registered locations in the admin panel when we go to the Appearance -> Menu section.

After the menus are registered, go to the admin panel and create our menus (in this example 2 menus):

Set the name of the menu (the menu in the template can be displayed by the specified name using the wp_nav_menu () function

Creating menu items We use the left block: link pages, headings

1. We choose where the menu will be located, since we have registered 2 menus, we will have 2 options: "Top Menu" and "Lower Menu".

Support for custom menus in WordPress is enabled for each theme separately, with this line in the functions.php file add_theme_support("menus"); However, this line is not necessary if we are registering the menu. In this case support will be enabled automatically.

Display custom menus via the wp_nav_menu function

The menus are registered and created, it remains to add them to the template. This is done by the wp_nav_menu() function, which can take the following parameters:

Wp_nav_menu(array("menu" => "", // (string) The name of the displayed menu (specified in the admin panel when creating the menu, takes precedence // over the specified location theme_location - if specified, the theme_location parameter is ignored) "container" => " div", // (string) Menu container. ul wrapper. Container tag is specified (default to div tag) "container_class" => "", // (string) container class (div tag) "container_id" => "" , // (string) id of the container (div tag) "menu_class" => "menu", // (string) class of the menu itself (ul tag) "menu_id" => "", // (string) id of the menu itself ( ul tag) "echo" => true, // (boolean) Display or return for processing "fallback_cb" => "wp_page_menu", // (string) Function to use (fallback) if menu does not exist (failed to get ) "before" => "", // (string) Text before each link "after" => "", // (string) Text after each link "link_before" => "", // (string) Text before the anchor (text) of the link "link_after" => "", // (string) Text after the anchor (text) of the link "depth" => 0, / / (integer) Nesting depth (0 - unlimited, 2 - two-level menu) "walker" => "", // (object) Class that collects the menu. Default: new Walker_Nav_Menu "theme_location" => "" // (string) The location of the menu in the template. (the key is indicated by which the menu was registered in the register_nav_menus function)));

In this example, you need to insert into the template approximately (depending on the parameters you need) the following 2 codes:

#1. Display menu by location

Top Menu. Insert into the template header (header.php), where the top (top) menu will be displayed:

"menu", "theme_location"=>"top", "after"=>" /")); ?>

Displays the menu created in the admin, attached to the "Top Menu" location with a similar structure:

Lower menu. Insert into the footer of the template (footer.php), where the bottom (bottom) menu will be displayed:

Displays the menu created in the admin, attached to the "Bottom Menu" location. The structure will be identical to the first.

Please note that in the first variant, the parameters were passed through an array (array). In the second line. Both options are correct. This is a common thing for WordPress features- parameters can be passed as an array or as a string (the string is then converted to an array).

#2 Display menu by name

To display a menu by its name, you can use the "menu" argument. The name is indicated, the one that was set when creating the menu in the admin panel. In our example (see picture) "Main menu". The menu argument takes precedence over theme_location , which means that if we display by name, the theme_location parameter will be ignored.

You can specify a menu ID instead of a title. So, if you change the name of the menu, the code will remain working. The menu ID can be viewed in the URL while editing the menu:

Notes

Remove wrapper Div

You may have noticed that the menu is often "wrapped" with an unnecessary div tag. It can be removed by specifying an empty parameter "container"=>"" in the arguments to the wp_nav_menu() function.

Changing the default settings

In order not to constantly specify the same parameter for inserted menus, they can be overridden in functions.php . This is done through the wp_nav_menu_args filter:

Register_nav_menus(array("top" => "Top menu", "bottom" => "Bottom menu")); add_filter("wp_nav_menu_args", "my_wp_nav_menu_args"); function my_wp_nav_menu_args($args="")( $args["container"] = ""; return $args; )

By analogy, you can create your own default arguments: $args["argument"] = "value" .

Checking if a menu is registered

WordPress also has a condition function: has_nav_menu("top") - checks if the top menu location has been registered. If the menu is not specified, then the wp_nav_menu() function will work like wp_list_pages() , but the "wrapper" div will remain, despite the fact that we removed it in the arguments. You can solve this problem like this:

If (has_nav_menu("top"))( wp_nav_menu(array("container" => "", "theme_location" => "top", "menu_class" => "menu")); ) else ( echo "

"; wp_list_pages(array("depth" => 1, "title_li" => "")); echo "

"; }

This can be done with styles.
But you need to understand that you have a Menu then you need to move it from the top to the Sidebar, which you don't have yet.
Well, that is, if this Theme allows, connect the Sidebar on the right side and transfer the Menu to it.
And to make it vertical, just add / change CSS

Main-navigation ul li, .secondary-navigation ul li ( display: block !important; )

Well, after that, you need to change the indents and other properties a little.

Maybe I misunderstood you, but I already have the Max mega menu in the left column area (it is black, lined up in 2 lines due to the limited area, and it is horizontal by default in the plugin), added it there through widgets, in the upper part I have standard menu themes and I need both of them, now I'll try CSS, thanks

Perhaps I also misunderstood you.
I was talking about the menu that you have on the screen in the horizontal upper block of light green color "Tea Coffee Sweets ..."
But after re-reading your answer, I understand that we are talking about different menus.
On the screen you see on the left side this is the Max mega menu, but I don’t see it on the site at your link.
And because I didn’t see him yesterday either, so I didn’t look at the screen.
Now I don't watch either.

I try to do something all the time, I put and remove different things, until I figured out how to make this menu vertical, I'm looking for another suitable one. For this menu, the same css solution can be applied as you wrote? Could you tell me in which part of the code to insert these lines, in the code of the plugin itself? Does location matter?
I went Plugins-edit-selected Max mega menu, then there are the following sections:
css
megamenu.scss
reset.scss
toggle-blocks.scss
admin
mixin.scss
I did not find similar lines in any of them to fix

I'm just a complete noob and did not understand why you need it to be displayed for me, apparently in order to look at the code and suggest it. I found the admin's answer in the Max Mega Menu support forum that the vertical one is only available in the Pro (paid) version, so for now it will have to be abandoned. Could you please advise any similar plugin, the criteria are as follows:
- the ability to install in the sidebar
- the menu should be dropdown
- when switching to any of the categories, so that it remains open at this stage, and does not close completely with a page refresh

Exactly.
Without seeing this very Menu, it is impossible to give advice and recommendations. It is possible that a couple of lines in CSS are enough. But not a fact.

Although, if you really plan to use this Max Mega Menu revealing all its features, then $23 for such a product is not much at all. It's worth it.

Dropdown mega menus- a great design find. Site navigation containing a large number of pages, has always been a problem. Classic static menus a la sitemap grow rapidly 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 work. Slightly missed and the wrong menu is revealed.

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

Be that as it may, the mega-menu is now, as they say, in trend, and if you have not used it yet, then you should take a closer look at it.

UberMenu: WordPress Mega Menu Plugin

This multifunctional plugin can safely be put in first place in this review: it creates full mega menu, has an incredible amount of different options, including background and font color control, font size, and so on. 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 responsive grid
• Individual adjustment of the width of each column as well as setting the default width
• Combining menu items into groups
• Centering menu items in horizontal rows
• Custom background images
• Scrollable submenus containing a large number of items.

All in all, 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 strike a balance between functionality and simplicity. There are over 10 different tools at your disposal for creating drop-down menus, which can contain text, images, links and widgets. Plus, unlimited color settings and over 600 Google fonts.

Cost: $15

Liquida Mega Menu

Liquida Mega Menu- a modern and multifunctional plugin that will suit both ordinary users, and developers - it can be easily embedded in your own developed theme.

The plugin offers a wide range of options for menu creation with a modern and stylish design: vertical or horizontal orientation, the ability to include in menu items links, images and even WooCommerce product cards or Easy Digital Downloads, which can come in handy when developing online stores.

Cost: $19

Sky Mega Menu

Three design options for mobile devices, 9 color schemes, own grid, shapes and 360 vector icons. This set allows Sky Mega Menu to take its rightful place among its own kind.

Cost: $6

WP Mega Menu

Plugin from the must have category. Many settings and options, work 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

In order to understand the settings panel NOO Menu you don't even have to read the documentation - everything is so intuitive. Having at hand preview in real time, you can simply change the values ​​and move the sliders while watching the effect. color scheme you can change it completely arbitrarily and save each option under your 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 accommodate it all.

Cost: $15

Hero Menu – Responsive WordPress Mega Menu Plugin

Hero Menu allows you to bind links to posts, categories, external URLs to menu items, and also display blog posts in them along with a featured image. IN latest version announced full support for the WooCommerce platform. For convenient operation 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 - latest trend in the world of web design. Such a menu quietly “dozes” in the corner of the page in the form of an icon, taking up almost no space, and when you hover over it, it opens, displacing page elements, and not overlapping them.

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

Cost: $22

Toggle Menu

With the growing popularity of mobile devices, pop-up (or context) menus are becoming more importance, because they save a lot of screen space.

Toggle menu is very simple, minimalist menu, which, nevertheless, perfectly copes 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 site into a modern one-page site. WP Floating Menu Pro will provide smooth scrolling from one part of the page to another.

At the disposal of the developer, WP Floating Menu Pro offers 13 and 7 different options for the location on the page, customization options, colors, content and number of items.
For screens smaller than 480px, it is possible to automatic shutdown menu.

Cost: $17

Flexi Menu WordPress Plugin

Flexi Menu is 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 in menu items - from contact forms to Google maps.

Able to automatically convert already existing regular menus into one mega menu with full control over the conversion process and saving or reassigning the appropriate actions.

Do you want to customize WordPress navigation menus to change their color or appearance? Your WordPress theme handles the appearance of the navigation menu on your site. You can easily set it up with using CSS to match your requirements. In this article, we will show you how to customize the style of your WordPress navigation menu.

Method 1: Using Manual Change Style of WordPress Navigation Menu

This method requires you to edit WordPress theme files. You should only use it if you are comfortable editing the code and understanding how the .

The best way make custom settings in your wordpress theme is . If you are only modifying CSS, then you can see our guide on how to do this without modifying theme files.

The navigation menu in WordPress is displayed as an unordered list (bulleted list).

If you have just used the following tag, then it will display a list without any CSS classes associated with it.

Your unordered list will have a class name of 'menu' with each list item having its own class .

This might work if you only have one menu location. However, most themes have several places where you can display the navigation menu.

Using only the default CSS classes may conflict with menus elsewhere.

That's why you need to define the CSS class and menu position. Chances are your WordPress theme already does this by adding a navigation menu with code like this:

"primary", "menu_class" => "primary-menu",)); ?>

This code tells WordPress that this theme is displaying the start menu. It will also add the primary-menu CSS class to the menu navigation.

Now you can customize the style of your navigation menu with this css structures.

#header .primary-menu() // container class #header .primary-menu ul () // container class first unordered list #header .primary-menu ul ul () //unordered list within an unordered list #header .primary -menu li () // each navigation item #header .primary-menu li a () // each navigation item anchor #header .primary-menu li ul () // unordered list if there is drop down items #header .primary -menu li li () // each drop down navigation item #header .primary-menu li li a () // each drap down navigation item anchor

Replace #header with the container class or ID used by your WordPress theme.

This structure will help you completely change the appearance of the navigation menu.

However, there are other classes that are automatically added with using WordPress for each menu item and menu. These classes allow you to further customize the navigation menu.

Current_page_item() // Class for Current Page .current-cat() // Class for Current Category .current-menu-item() // Class for any other current Menu Item .menu-item-type-taxonomy() // Class for a Category .menu-item-type-post_type() // Class for Pages .menu-item-type-custom() // Class for any custom item that you added .menu-item-home() // Class for the Home Link

WordPress also allows you to add CSS classes to individual menu items from within the admin area.

You can use this feature to style menu items, like adding icons to an image using the menu or simply changing the color to make the menu item stand out.

Let's go to the page Appearance » Menus and press the button.

Once you have checked these settings, you will see that an additional field will be added when you edit each individual menu item.

Now you can use this CSS class in your stylesheet to add custom CSS. This will only affect the menu item with the CSS class you added.

Method 2: Customize Menu Style in WordPress Using Plugins

Your WordPress theme uses styling for the navigation menu. Many beginners are not comfortable with editing theme files or writing CSS on their own.

That's when it comes in handy WordPress Plugin menu styling. This saves you from editing theme files or writing code.

First you need to install and activate the CSS Hero plugin. For more detailed information see our step by step guide on how to.

CSS Hero is a premium WordPress plugin that allows you to design your own WordPress theme without writing a single line of code (no HTML or CSS).

Upon activation, you will be redirected to receive your CSS Hero key. Just follow the instructions on the screen and you will be redirected back to your site in a few clicks.

Now you need to click on the CSS Hero button in your WordPress admin panel.

CSS Hero offers a WYSIWYG editor (what you see is what you get). Clicking the button will take you to your site with the CSS Hero floating toolbar visible on the screen.

You need to click on the blue icon at the top to start editing.

Point the mouse to your navigation menu and CSS Hero will highlight it, showing the borders around it. When you click on the highlighted navigation menu, it will show you the items you can edit.

In the screenshot above, it shows us the menu item, menu navigation, menu navigation container, etc.

Let's say we want to change the text color of all items in the navigation menu. In this case, we will select a navigation menu that affects all menus.

Now CSS Hero will show you various properties that you can edit like text, background, borders, margins, padding, etc.

You can click on any property you want to change. CSS Hero will show you a simple interface where you can make your changes.

In the screenshot above, we have text selected and it showed us a nice interface for choosing fonts, changing text color, size, and other properties.

As changes are made, you will be able to see them live in the theme preview.

Once you're satisfied with the changes, click on the Save button on the CSS Hero toolbar to save your changes.

The best thing about using this method is that you can easily undo any changes you make. CSS Hero keeps a complete history of all your changes, and you can go back and forth between those changes.

We hope this article helped you learn how to style your navigation menu in WordPress.