Do you want to create a drop-down menu in WordPress? You've come to the right place! In this tutorial, I'll teach you how to create a professional drop-down menu design.
Navigation menus are having a bit of a moment in the spotlight. From burger menus for mobile through mega menus for stores to sticky menus for enhanced user experience, there's a great choice in the way you can present your navigation menu on your WordPress site.
But what if you want to create a straightforward drop-down menu for WordPress with a few top-level items and some more items that drop down from them when the user hovers over them?
Before you start getting into coding advanced menus like mega menus and burger menus, it's a good idea to learn how to create a drop-down menu. This will come in useful on more sites than you might imagine (not every site needs a fancy menu), and it will give you the foundation you need to start building more advanced menus.
If you'd rather watch our video on creating a drop-down menu in HTML for WordPress, just press play and get started.
In this tutorial, I'm going to show you how to create a drop-down menu in your WordPress theme, using CSS to target the HTML that's output by the WordPress menu function. This is designed to be used in a theme you're coding yourself, and not for a third-party theme, which will already have its own menu. However, if you're working with a third-party theme whose menu isn't drop-down and you want to add this, then you'll need to create a child theme and add your menu code to that.
To follow along with this tutorial, you'll need:
The first thing you'll need to understand is how WordPress drop-down menus work. Unlike with static sites, menus aren't hard-coded into your site. Instead, WordPress uses a PHP function to query the database and fetch navigation menu items, then display them in the correct structure.
Each item in your navigation menu is actually a post in the wp_posts table in your database—not a normal post, but a special kind of post that's used just for navigation menu items, with its own metadata including the text to be displayed and the target of the link.
In your theme, open up the header.php file. You should be able to find this line:
wp_nav_menu( array( 'container_class' => 'main-nav', 'theme_location' => 'primary' ) );<br>
Your function may look a little different depending on the parameters, but let's break down the example above and see what each element does:
Before we can add CSS for our dropdown menu, it helps to be familiar with the code that WordPress generates for menus.
Here's a typical drop-down menu example for a small business, shown in the Menus admin screen:
Now here's the drop-down navigation menu in HTML:
<div class="main-nav"><br> <ul id="menu-navbar" class="menu"><br> <li id="menu-item-610" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-609 current_page_item menu-item-610"><a href="https://121interviewcoaching.co.uk/">Home</a></li><br> <li id="menu-item-613" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-613"><a href="https://121interviewcoaching.co.uk/about/">About Me</a></li><br> <li id="menu-item-615" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-615"><a href="https://121interviewcoaching.co.uk/services/">Services</a><br> <ul class="sub-menu"><br> <li id="menu-item-618" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-618"><a href="https://121interviewcoaching.co.uk/services/services-for-individuals/">Preparing for interviews / individuals</a></li><br> <li id="menu-item-617" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-617"><a href="https://121interviewcoaching.co.uk/services/services-for-groups/">Preparing for interviews / groups</a></li><br> <li id="menu-item-619" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-619"><a href="https://121interviewcoaching.co.uk/services/conducting-interviews/">Conducting interviews</a></li><br> </ul><br> </li><br> <li id="menu-item-30780" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-30780"><a href="https://121interviewcoaching.co.uk/succeed-at-your-next-job-interview/">My Book</a></li><br> <li id="menu-item-614" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-614"><a href="https://121interviewcoaching.co.uk/clients-2/">Clients</a></li><br> <li id="menu-item-616" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-616"><a href="https://121interviewcoaching.co.uk/interview-tips/">Interview Tips</a></li><br> <li id="menu-item-612" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-612"><a href="https://121interviewcoaching.co.uk/where-i-work/">Areas covered</a></li><br> <li id="menu-item-611" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-611"><a href="https://121interviewcoaching.co.uk/contact/">Contact & Links</a></li><br> </ul><br></div><!-- #main-nav --><br>
Creating a drop-down menu in HTML consists of some code we need to understand before starting with our drop-down menu for WordPress:
So now we know what's being output by WordPress, we can determine which elements we want to target with our CSS for the drop-down menu.
We want to achieve a couple of things:
In your theme's stylesheet, start by hiding the second-level items by default.
Add this:
main-nav ul ul {<br> display: none;<br>}<br>This will hide the ul element inside the ul element, however, as it requires one ul inside the menu.
Now, if you open the page and try to view the second-level items, it won't be possible—they'll be hidden. Let's fix that.
Now we need to ensure that the li will be displayed when the top-level ul ul element.
Open your stylesheet and find the line with position: absolute gives the second-level list absolute positioning, taking it out of the flow of elements in the page. For the higher-level item, top: 3em positions the top of the list relative to the top of the element it's inside, namely the top-level list item. This left: 0 places the list to the left, relative to the item above it.
Now let's take a look at what we see when we hover over the top-level item:
It works! When I hover over the top-level item, the drop-down menu is now displayed.
The simple drop-down menu code above is great for the desktop version of the site, but the reality is that most people will be visiting your site on a mobile phone.
The menu here is too big to fit onto a small screen, so the best solution is to edit the CSS for our drop-down menu on small screens and use some JavaScript to create a burger menu.
Here’s how to do it.
First, add the icon that people will need to tap on to access the menu on a small screen.
Add this to the header.php file, in the place where you want the menu icon to go:
wp_nav_menu( array( 'container_class' => 'main-nav', 'theme_location' => 'primary' ) );<br>
That will output the burger symbol, using the HTML code for the symbol, inside an element with a class we’ll use to hide it on larger screens.
Now you need to add the CSS to your stylesheet. First, hide the icon on larger screens:
<div class="main-nav"><br> <ul id="menu-navbar" class="menu"><br> <li id="menu-item-610" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-609 current_page_item menu-item-610"><a href="https://121interviewcoaching.co.uk/">Home</a></li><br> <li id="menu-item-613" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-613"><a href="https://121interviewcoaching.co.uk/about/">About Me</a></li><br> <li id="menu-item-615" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-615"><a href="https://121interviewcoaching.co.uk/services/">Services</a><br> <ul class="sub-menu"><br> <li id="menu-item-618" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-618"><a href="https://121interviewcoaching.co.uk/services/services-for-individuals/">Preparing for interviews / individuals</a></li><br> <li id="menu-item-617" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-617"><a href="https://121interviewcoaching.co.uk/services/services-for-groups/">Preparing for interviews / groups</a></li><br> <li id="menu-item-619" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-619"><a href="https://121interviewcoaching.co.uk/services/conducting-interviews/">Conducting interviews</a></li><br> </ul><br> </li><br> <li id="menu-item-30780" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-30780"><a href="https://121interviewcoaching.co.uk/succeed-at-your-next-job-interview/">My Book</a></li><br> <li id="menu-item-614" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-614"><a href="https://121interviewcoaching.co.uk/clients-2/">Clients</a></li><br> <li id="menu-item-616" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-616"><a href="https://121interviewcoaching.co.uk/interview-tips/">Interview Tips</a></li><br> <li id="menu-item-612" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-612"><a href="https://121interviewcoaching.co.uk/where-i-work/">Areas covered</a></li><br> <li id="menu-item-611" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-611"><a href="https://121interviewcoaching.co.uk/contact/">Contact & Links</a></li><br> </ul><br></div><!-- #main-nav --><br>
Now inside a media query, add the CSS for the menu:
main-nav ul ul {<br> display: none;<br>}<br>Note that you’ll need to edit this if you’re using different classes and IDs in your theme.
The final step is to add a script to make the menu appear when a user taps on the icon. Create a folder in your theme called scripts, and inside that, a new file called burger-menu.js, and add this to it:
<a class="toggle-nav" href=“#">☰</a><br>
Now make sure the script is called by the theme. In your theme’s functions.php file, add a function to enqueue the script:
.toggle-nav {<br><br> display: none !important;<br><br>}<br>Now save all your files, and you’ll have a burger menu on small screens.
When your site needs a menu with multiple levels but you don't need a lot of links outside your top-level menu, a drop-down menu is the simplest way to achieve this. The site I've used to demonstrate this only has one item in its menu with other items below it, and there are only three of those. Using a mega menu would be overkill, and a single-level menu wouldn't allow me to display everything I want.
Being able to add a menu like this to your themes will give you more flexibility with your menus and enhance the user experience. And you can do it with just a few lines of CSS.
The above is the detailed content of How to Make a Drop-Down Menu in WordPress. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
