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

[html]Menu

[/html]
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

[css].dropdown {
display:none;
position: absolute;
top: 100%;
background: #0072bc;
min-width: 12em;
}[/css]
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.
[javascript]// 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();
}
});
[/javascript]
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:
[html][/html]
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.
[php]register_nav_menus( array(
‘top’ => __( ‘Top Menu’, ‘m1’ )
) );[/php]
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]

[/php]
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.


Posted

in

by

Tags:

Comments

4 responses to “Simple jQuery Drop Down Menu in WordPress”

  1. bobsd99 Avatar
    bobsd99

    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?

  2. gurung Avatar

    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.

  3. Todd Wheeler Avatar

    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

    1. Scott Avatar
      Scott

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