How to Make a Drop-Down Menu in WordPress

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.

Here's What You'll Learn in This Drop-Down Menu Design Tutorial

• Understand how WordPress drop-down menus work through the built-in menu functionality.
• Get familiar with code so you can learn how to make a drop-down menu in HTML. 
• Make your drop-down menu design mobile-friendly. 

What You'll Need to Create a Drop-Down Navigation Menu in HTML on WordPress

To follow along with this tutorial, you'll need:

• a development installation of WordPress
• a theme you're coding yourself, or a child theme of a third-party theme if you want to modify the menu
• a code editor

1. WordPress's Built-in Menu Functionality

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:

• container_class is the CSS class that will be given to the container in which the menu is wrapped. In this case, it's main-nav. That's what we'll be targeting with our CSS later on.
• theme_location => primary. You can only use this for one menu. But you may want to use additional parameters, which you can find in the WordPress handbook page on wp_nav_menu() Function

  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 &#038; 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: 

  • A div with the wp_nav_menu() function.
  • Inside that, a menu-navbar and the class li elements, each with the class of li elements is another li elements inside—the second-level menu items. It's this that we want to drop down when the user hovers over the top-level menu item.

  Coding the CSS for our Drop-Down Menu

  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:

  • When the page is opened, the second-level menu items are hidden.
  • When the user hovers over a top-level item, the second-level items below it appear.

  Hiding the Second-Level Items by Default

  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.

  Drop-Down Menu Design: Creating Second-Level Items That Appear on Hover

  Now we need to ensure that the li will be displayed when the top-level ul ul element.

  Adding Layout Styling to the Second-Level List

  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.

• 99999 ensures that it is displayed on top of everything else.
• The remaining code gives the list width and also adds display styling to it, including a shadow to make it look as if it's on top of the page.

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.

3. Making Your Drop-Down Menu Mobile-Friendly

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.

Adding a Menu Icon to the Banner of a Drop-Down Menu on WordPress

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.

Adding the CSS for the Burger Menu

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 &#038; 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.

Adding the JavaScript

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=“#">&#9776;</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.

Drop-Down Menus Are Useful for Small, Multi-Level Menus

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.

That's It! This is How to Make a Drop-Down Menu in HTML

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!