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:

第二層和第三層的項(xiàng)目是可見的，但說得客氣一點(diǎn)，它們看起來很亂。讓我們解決這個(gè)問題。

我們首先將每個(gè)頂級(jí)項(xiàng)目下的 li 元素設(shè)置為全寬。為了實(shí)現(xiàn)這一點(diǎn)，我們必須通過將其設(shè)置為靜態(tài)來刪除上面元素的任何相對(duì)或絕對(duì)定位。我們還將添加 display:inherit 以確保當(dāng)頂級(jí)菜單項(xiàng)懸停在上方時(shí)，下級(jí)菜單項(xiàng)可見。

將其添加到您的樣式表中：

.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;
}

菜單現(xiàn)在看起來像這樣：

它是全寬的，但我們需要做一些改進(jìn)布局。讓我們向二級(jí)列表添加一個(gè)浮動(dòng)，以便它們彼此相鄰顯示。

將其添加到您的樣式表中：

.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;
}

現(xiàn)在菜單看起來更好了：

浮動(dòng)正在工作，但背景顏色已關(guān)閉。編輯 .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;
}

現(xiàn)在菜單看起來更好了：

讓我們?yōu)楦鱾€(gè)列表添加一些顏色和布局樣式，以使第二級(jí)項(xiàng)目更加突出。將其添加到您的樣式表中：

.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;
}

這使得列表看起來更好，第二級(jí)項(xiàng)目帶有下劃線和紅色。請(qǐng)隨意修改這些顏色以適合您的主題。

最后，讓我們刪除第三級(jí)項(xiàng)目的上邊距，以便它們更緊密地聚集在一起。編輯它們的代碼如下：

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

現(xiàn)在菜單看起來更加整潔：

我們現(xiàn)在有了一個(gè)功能強(qiáng)大的大型菜單，使用我們主題中的主導(dǎo)航菜單。

您不需要插件來創(chuàng)建簡單的超級(jí)菜單

如果您想使用 WordPress 導(dǎo)航菜單的內(nèi)容創(chuàng)建一個(gè)簡單的大型菜單，這種技術(shù)可以讓您將一個(gè)菜單添加到您的主題中，而無需太多額外的代碼。

但是，如果您想添加額外的功能，例如自定義樣式和圖像，使用插件可能會(huì)更快。您一定會(huì)在我們的頂級(jí)大型菜單插件列表中找到滿足您需求的一款。