eFrog Digital Design |

As the amount of content in your site grows, at some stage you’ll want to implement a drop down or fly-out menu to better group the navigation on your site. Implementing a drop down or fly-out menu isn’t rocket science and we’re going to show you how to achieve a basic drop down menu in just a few steps.

Firstly, we’re going to want to enable WordPress’ wp_nav_menu() function in your functions.php file.

Now that WordPress is ready to handle menu’s, we can add this snippet of code to our theme wherever you want your menu to display.

Note that we’ve set the depth of our menu to 2 levels. You can of course set this to more, but in order to be a hierarchical menu, it must have at least 2 levels.

This default, un-styled menu should look something like this:

We’re going to change this into a drop down menu, so we’re going to add some CSS to get these items to display vertically inline and give it a bit of style at the same time

Now our menu will look like this:

Before we add the single line of jQuery that will show/hide the drop down menu, we’re going to style the drop down menu so it looks how we want it to look.

So basically we’ve removed the border-radius as well as the floats from the nested LI’s. That results in this:

A bit “meh”, but we’re going to add some flair now. Firstly, we’re going to add a custom class to the first and last LI items in each nested UL. The jQuery for this is:

The reason for doing this is that we want to add a border-radius to the first and last LI’s to round off the dropdown menu’s. Also we want to add a little ‘span’ element before the first LI in each nested menu. We’re going to CSS this span to become a CSS triangle that’ll act as a small arrow above the drop down.

We add this span element with some jQuery:

With these classes applied, we can now spruce our drop down menu’s up even further:

And now we have a smart looking sub menu:

Finally, we want to add the magic line of jQuery that’ll show and hide our sub menu on rollover. It’s just a single line of code:

Now if you hover over any LI that has a nested UL, the nested menu will show and hide automagically. You can even jazz it up further by changing the above line of jQuery to animate the showing and hiding of the menu item. For example:

If you want a fly-out menu rather, then the only thing that changes is the CSS:

And that changes our menu into a flyout:

We’d love to know if you’ve used this code in your design. Share a link in the comments below!