A drop down menu is often your best means of keeping the navigation simple and uncluttered, that can offer your theme and users 2 new things. One, add a nice new type of effect to enhance your theme. Two, allow the users to find things more easily. There are a few plugins that you can use to make this, but in this post, I’ll show you how to make your own WordPress Drop-Down menu with CSS and jQuery and WordPress’s standard
wp_list_pages, wp_nav_menu, wp_list_categories
To get started with this tutorial, you’ll need to have a WordPress website up and running and a willingness to alter your theme files. Once that’s squared away you’re ready to rock!
The Standard WordPress navigation layout
Before we get into making drop downs, we need to take a look at the way WordPress layouts it’s navigation.
wp_nav_menu lay out their menus pretty much exactly the same, besides different class names, so we’ll just take a look at
wp_nav_menu‘s printed code:
As you can see, WordPress neatly (well neat besides all the classes) layouts out the menu in a nice semantic list, with the children of the navigation nested inside of it’s parent li. This allows us to use both CSS and/or jQuery to make our drop downs work!
Styling the Navigation
Now, let’s styling the navigator. We want our list items aligned horizontally, and of course centered in the middle of the page.
jQuery Animation the Navigation
There’s also an easy way to make WordPress menus with jQuery drop downs. jQuery allows you to get a bit more fancy, by adding speeds and fades to the animation. It’s also useful if you’re still stuck supporting IE6.
There’s a tiny piece of jQuery required to show/hide the drop down menu’s. From an accessibility point of view, you can link the top-level navigation item so that if JS disabled, the user will still be able to get around your site. Here’s the script.
Finally!! A Drop Down WordPress Navigation Menu using CSS and jQuery!
That’s basically it, the example is about as stripped down as I could make it. Hopefully you’ll have fun bending the code to your next project. Feel free to post comments if you have any questions about the tutorial. Happy coding!