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

• Menu Item
• Menu
• Settings
• Search

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