An Interest In:
Web News this Week
- February 29, 2024
- February 28, 2024
- February 27, 2024
- February 26, 2024
- February 25, 2024
- February 24, 2024
- February 23, 2024
An Easy Way to Code a Mega Menu in WordPress
In a previous post, I looked at how to decide when a mega menu is right for your website and how to use a plugin to create one.
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 the menu how you want it, and make sure it’s consistent with your theme.
In this tutorial, I’ll show you how to code a mega menu and add it to your theme.
What You’ll Need
To follow along with this tutorial, you’ll need the following:
- A development installation of WordPress (don’t add this to your live site until it’s all working correctly).
- Your own theme that you can edit, or if you’re using a third party theme, a child theme for that theme.
- A code editor.
I’m using a third party theme (ColorMag) so I’m going to create a child theme of that and add my styling to that.
How the Mega Menu Works
Our mega menu will take the code output by the menus system in WordPress and display it as a mega menu. I won’t be adding an additional menu to the site: you could do this if you wanted to but as this mega menu won’t work on smaller screens, I prefer to stick to the same menu. This is because I like to give users on mobile and on desktop access to the same navigation.
The mega menu will be styled to only work on larger screens. For smaller screens, I recommend using a burger menu, which is invisible until the user taps on a burger (three horizontal lines) icon. You can find out how to code a burger menu in our tutorial on coding a burger menu.
Getting Started
The first step is to add plenty of menu items to your menu. This means you will have lots of content to fill your mega menu with.
I’ve added lots of links to my menu, with three levels of navigation. When the user hovers over a top level menu item, the items below that will appear in a mega menu. Right now, they appear in the standard layout:
Let’s start by identifying the code that’s output by this menu in the front end of the site. Here’s the (edited) code for my menu. I've taken out some of the li
elements and removed most 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 taking a moment to study it as it helps us identify the classes and elements (and sub-elements) we'll need to target with CSS in order to create our mega menu.
We can use the CSS classes generated by WordPress to style our mega menu and to ensure it’s laid out correctly. We’ll use a media query to ensure that the menu appears only on screens that are large enough.
The specific elements we'll be targeting are:
.main-navigation
ul
elements beneath that (includingul ul
andul ul ul
)li
anda
elements inside the ul elements.
On smaller screens, I’ll make the default menu visible, although I recommend using a mobile alternative such as a burger menu on very small screens. My theme already has a burger menu coded into it for small screens, so I don't need to worry about that.
Note: the HTML output by your theme will be similar to mine as it's generated by WordPress. But there will be differences, such as the class or ID of the main navigation element. It pays to check it first, just to be sure.
Setting Up the Media Query
The first step is to add a media query for the mega menu styling (if you need it). In your theme’s stylesheet, add this:
@media screen and ( min-width: 500px ) {
}
You can change the min-width
value to whatever works on your theme and corresponds to the media queries already present for any burger menu.
Styling the Layout
My existing menu is styled so that third-level items are only displayed when I hover over the second-level item immediately above them. I want to change this so that all menu items appear. I’ll then style them so that they’re laid out correctly.
Let’s start by making second and third level menu items visible when the user hovers over the top level item.
Add this to your 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 a menu item it looks a bit like this:
The second and third level items are visible but they look very messy, to put it mildly. Let's fix that. We'll do that firstly by making the li
element under each top level item full width. To make this work, we'll have to remove any relative or absolute positioning for elements above those by making them static. We'll also add display:inherit
to ensure lower level menu items are visible when the top level item is hovered over.
Add this to your stylesheet:
.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;
}
The menu now looks like this:
It's full width but we need to do something to improve the layout. Let's add a float to the second level lists so that they appear next to each other.
Add this to your stylesheet:
.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;
}
Now the menu is looking better:
The float is working but the background color is off. Edit your styling for the .main-navigation ul li:hover ul
element to add background styling. The specific color you use will depend on what your theme is using.
.main-navigation ul li:hover ul {
display: inherit;
position: absolute;
left: 0;
right: 0;
width: 100%;
background-color: #bababa;
}
Now the menu looks better:
Let's add some color and layout styling to the individual lists, to make the second level items more prominent. Add this to your stylesheet:
.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;
}
This makes the lists look better, with second level items being underlined and red. Feel free to amend these colors to fit with your theme.
Finally, let's remove the top margin on third level items so they are bunched together more closely. Edit the code for them as follows:
.main-navigation ul:hover ul li ul li a {
padding-left: 1em;
padding-top: 0;
}
Now the menu looks much tidier:
We now have a functioning mega menu, using the main navigation menu from our theme.
You Don't Need a Plugin to Create a Simple Mega Menu
If you want to create a simple mega menu using the contents of the WordPress navigation menu, this technique will let you add one to your theme without too much extra code.
However if you want to add extra features such as custom styling and images, using a plugin will probably be quicker. You're sure to find one that meets your needs in our list of the top mega menu plugins.
Original Link: https://code.tutsplus.com/tutorials/how-to-code-a-mega-menu-in-wordpress--cms-33203
TutsPlus - Code
Tuts+ is a site aimed at web developers and designers offering tutorials and articles on technologies, skills and techniques to improve how you design and build websites.More About this Source Visit TutsPlus - Code