Simplify the process of creating mega menus in WordPress

In my previous article, I looked at how to determine when a mega menu is right for your site and how to use a plugin to create a mega menu.

But if you're feeling more ambitious, you might prefer to code your own mega menu into your theme. This gives you the benefit of being able to design your menu the way you want and ensure it goes with your theme.

In this tutorial I will show you how to write a mega menu and add it to your theme.

what do you need

To follow this tutorial you will need the following:

• Development installation of WordPress (don’t add it to your live site until everything is running properly).
• A theme that you can edit yourself, or if you are using a third-party theme, a child theme of that theme.
• Code Editor.

I am using a third party theme (ColorMag) so I will create a child theme for it and add my styles to it.

How Mega Menu Works

Our mega menu will take the code output by the menu system in WordPress and display it as a mega menu. I wouldn't add an extra menu to the site: you can do that if you want, but since this large menu won't work on smaller screens, I prefer to stick with the same menu. This is because I like to give users on mobile and desktop access to the same navigation.

Mega menu styles will only work on larger screens. For smaller screens, I recommend using a hamburger menu, which is invisible until the user clicks on the hamburger (three horizontal lines) icon. You can learn how to code a hamburger menu in our hamburger menu coding tutorial.

start using

The first step is to add a large number of menu items to the menu. This means you'll have plenty of content to populate your mega menu.

I added a lot of links to the menu and have three levels of navigation. When the user hovers over a top-level menu item, the items below that menu item appear in the mega menu. They now appear in the standard layout:

Let us first identify the code output by this menu on the front end of the website. Here is the (edited) code for my menu. I took out some li elements and removed most of the CSS classes so you can see the structure of the HTML:

<nav id="site-navigation" class="main-navigation clearfix" role="navigation">
    <div class="inner-wrap clearfix">
				
        <p class="menu-toggle"></p>
        <div class="menu-primary-container">
            <ul id="menu-main-nav" class="menunav-menu" aria-expanded="false">
                <li><a>Home</a></li>
                <li>
                    <a>Top Level Item</a>
                    <ul class="sub-menu">
                        <li><a>Second Level Item 1</a>
                            <ul class="sub-menu">
                                <li><a>Third Level Item 1</a></li>
                                <!-- more li elements -->
                            </ul>
                        </li>
                        <li>
                            <a>Second Level Item 2</a>
                            <ul class="sub-menu">
                                <li><a>Third Level Item 5</a></li>
                                <!-- more li elements -->
                            </ul>
                        </li>
                        <li><a>Second Level Item 3</a>
                            <ul class="sub-menu">
                                <li>
                                    <a>Third Level Item 7</a>
                                </li>
                                <!-- more li elements -->
                            </ul>
                        </li>   
                    </ul>
                </li>
                <li>
                    <a>Another Top Level Item</a>
                    <ul class="sub-menu">
                        <li>
                            <a>Second Level Item 4</a>
                            <ul class="sub-menu">
                                <li><a>Third Level Item 12</a></li>
                                <!-- more li elements -->
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>

There's a lot of code there, but I recommend spending some time studying it, as it can help us identify the classes and elements (and sub-elements) we need to position using CSS in order to create our mega menu.

We can use WordPress-generated CSS classes to design our mega menu and ensure it is laid out correctly. We'll use media queries to ensure that the menu only appears on screens that are large enough.

The specific elements we will target are:

• .main-navigation
• ul elements (including ul ul and ul ul ul)
• The li and a elements are inside the ul element.

On smaller screens I would make the default menu visible, although on very small screens I would recommend using mobile alternatives such as a hamburger menu. My theme already has a hamburger menu coded for small screens, so I don't need to worry about that.

Note: Your theme’s HTML output will be similar to mine because it is generated by WordPress. But there can also be differences, such as the class or ID of the main navigation element. To be sure, it’s best to check first.

Set media query

The first step is to add media queries for the mega menu style (if needed). In your theme's stylesheet, add the following:

@media screen and ( min-width: 500px ) {

}

You can change the min-width value to one that is appropriate for your theme and corresponds to any existing media queries for the hamburger menu.

Set layout style

My existing menu is styled in such a way that the third level items only show up when I hover over the second level items immediately above them. I want to change this so that all menu items are displayed. Then I'll style them so they lay out correctly.

Let's start by making the second and third level menu items visible when the user hovers over the top level menu item.

Add this to the stylesheet inside the media query:

.main-navigation ul:hover li ul,
.main-navigation ul:hover li ul li ul {
    display: inherit;
}

Now, when you refresh the page and hover over the menu item, it will look a little like this:

第二层和第三层的项目是可见的，但说得客气一点，它们看起来很乱。让我们解决这个问题。

我们首先将每个顶级项目下的 li 元素设置为全宽。为了实现这一点，我们必须通过将其设置为静态来删除上面元素的任何相对或绝对定位。我们还将添加 display:inherit 以确保当顶级菜单项悬停在上方时，下级菜单项可见。

将其添加到您的样式表中：

.main-navigation {
    position: relative;
}
.main-navigation li {
    position: static;
}
.main-navigation ul li:hover ul {
    display: inherit;
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
}
.main-navigation ul li:hover ul li ul {
    display: inherit;
    position: relative;
    left: 0;
}

菜单现在看起来像这样：

它是全宽的，但我们需要做一些改进布局。让我们向二级列表添加一个浮动，以便它们彼此相邻显示。

将其添加到您的样式表中：

.main-navigation ul li:hover ul li {
    float: left;
    position: static;
    display: block;
    padding-top: 1em;
}
.main-navigation ul li:hover ul li ul li {
    float: none;
    padding-top: 0;
}

现在菜单看起来更好了：

浮动正在工作，但背景颜色已关闭。编辑 .main-navigation ul li:hover ul 元素的样式以添加背景样式。您使用的具体颜色取决于您使用的主题。

.main-navigation ul li:hover ul {
    display: inherit;
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    background-color: #bababa;
}

现在菜单看起来更好了：

让我们为各个列表添加一些颜色和布局样式，以使第二级项目更加突出。将其添加到您的样式表中：

.main-navigation ul:hover ul li a:link,
.main-navigation ul:hover ul li a:visited {
    color: #b01b1b;
    text-decoration: underline;
}
.main-navigation ul:hover ul li ul li a:link,
.main-navigation ul:hover ul li ul li a:visited {
    color: #fff;
    text-decoration: none;
}

这使得列表看起来更好，第二级项目带有下划线和红色。请随意修改这些颜色以适合您的主题。

最后，让我们删除第三级项目的上边距，以便它们更紧密地聚集在一起。编辑它们的代码如下：

.main-navigation ul:hover ul li ul li a {
    padding-left: 1em;
    padding-top: 0;
}

现在菜单看起来更加整洁：

我们现在有了一个功能强大的大型菜单，使用我们主题中的主导航菜单。

您不需要插件来创建简单的超级菜单

如果您想使用 WordPress 导航菜单的内容创建一个简单的大型菜单，这种技术可以让您将一个菜单添加到您的主题中，而无需太多额外的代码。

但是，如果您想添加额外的功能，例如自定义样式和图像，使用插件可能会更快。您一定会在我们的顶级大型菜单插件列表中找到满足您需求的一款。

The above is the detailed content of Simplify the process of creating mega menus in WordPress. For more information, please follow other related articles on the PHP Chinese website!