Simple jQuery Drop Down Menu in WordPress

There are lots of ways to make drop-down menus, and usually my preferred method is all CSS.

However, an all CSS drop down menu relies on the :hover selector, which is not always desirable. It’s fine on desktops, but mobile touch devices don’t play nice with :hover. You can’t really hover with your finger, you either click or you don’t. That’s where using some jQuery can help out.

For my project, I needed an icon that when clicked, showed a drop down menu. This is similar to the functionality in the Facebook desktop app, or in Twitter Bootstrap. I wrote some custom jQuery because I didn’t happen to be using a library that already had a dropdown.

It’s pretty simple, let’s dig in!

Demo

(Click the menu to activate the dropdown)

See the Pen Simple jQuery Drop Down Menu in WordPress by Scott Bolinger (@scottb) on CodePen

The HTML

<a class="dropdown-toggle" href="#" title="Menu">Menu</a>
<ul class="dropdown">
  <li><a href="#">Menu Item</a></li>
  <li><a href="#">Menu</a></li>
  <li><a href="#">Settings</a></li>
  <li><a href="#">Search</a></li>
</ul>

Nothing fancy here, just a button to click, with the drop down right underneath. We’ll hide the drop down with CSS, then toggle it with jQuery.

The CSS

.dropdown {
  display:none;
  position: absolute;
  top: 100%;
  background: #0072bc;
  min-width: 12em;
}

Obviously you can customize this, the important part is the “display:none” so that the drop down is hidden initially.

The jQuery

There is probably a more elegant way to do this, but it works just fine.

// Dropdown toggle
$('.dropdown-toggle').click(function(){
  $(this).next('.dropdown').toggle();
});

$(document).click(function(e) {
  var target = e.target;
  if (!$(target).is('.dropdown-toggle') && !$(target).parents().is('.dropdown-toggle')) {
    $('.dropdown').hide();
  }
});

The first block of code is just selecting the drop down toggle button, then showing the .dropdown div when it’s clicked using toggle().

The next part is optional, but very helpful. It hides the drop down if you click anywhere on the page. Otherwise you have to click the same link to open/close it, which can be kind of annoying.

Note: with WordPress, make sure you use jQuery no conflict mode.

The Icon

If you want the toggle link to be an icon, there are lots of ways to do it. The easiest is to use a font icon library like Font Awesome.

That makes using the icon as easy as this:

<a class="dropdown-toggle" href="#" title="Menu"><i class="icon-cog"></i></a>

The code above gives you a fully functioning drop down menu, but it’s static. Let’s spice it up by hooking it up to WordPress!

WordPress Menu

If you want to hook this up to your WordPress custom menu system, it gets a little more complex, but still not too bad.

Functions.php

First, we need to register our menu in your theme functions.php file. You may already have a menu registered, if so, just add the line with ‘top’ after your other menus.

register_nav_menus( array(
  'top' => __( 'Top Menu', 'm1' )
) );

Now that the menu is registered, we need to display it in our theme. The code below goes wherever you want to display the menu, probably header.php. (Make sure to use a child theme if you are customizing a parent theme!)

Header.php

<?php if ( has_nav_menu( 'top' ) ) : ?>

  <nav id="top-menu" class="top-menu" role="navigation">
  <a href="#" class="nav-right-btn dropdown-toggle" title="Menu"><i class="icon-cog"></i></a>
  <?php
    $args = array(
    'theme_location' => 'top',
    'container_class' => 'dropdown' );
    wp_nav_menu($args);
  ?>
  </nav>
		    	
<?php endif; ?>

I’ve used some extra classes and IDs here for more styling control, but that is optional. Depending on how you want things displayed, you may need to tweak things with CSS.

That’s it for the code, the only thing you have left to do is create your menu. Go to Appearance => Menus, create your menu, then set it in the “Top” location.

You’re done! You have a mobile friendly drop down menu, hooked up to your WordPress theme.


Get more content like this

Get valuable insight on business and money in your inbox once per week.

Posted by Scott

  1. This is fantastic, works great!

    What would be the correct way to use multiple instances of this drop applet on the same page, without conflict and the maximum re-usable styling?

    Reply

  2. I would like to use the code in my site. But there is a sub-menu item in my menu. Is there a solution for a sub-menu item ? I will bookmark this page and wll check again hoping to get a reply. Great little solution otherwise. Thanks.

    Reply

  3. Thank you, Scott, for this very useful tutorial. Can I buy you a beer via PayPal?

    If I wanted to have the menu stay in a clicked state, like this example indicates, is the solution more complicated than adding this javascript file into the mix?
    http://www.sweet-web-design.com/examples/active-item/active-class.html

    Thanks and regards,
    Todd

    Reply

    1. Hi Todd, including something like that should work in theory, but I haven’t tried it.

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

Being a business owner is hard. I'm trying to get better in business and life, enter your email if you want to join me.
Holler Box