The Blog

Easy WordPress DropDown Menus

Posted on 10/25/10 in blog, development about CSS, development, HTML, jQuery, tutorial, wordpress

I’ve always been a huge fan of WordPress because they make everything so easy for developers. The dropdown menu is no exception. By using WordPress’s standard wp_list_pages or WordPress 3′s wp_nav_menu menu functions, we can easily create different kinds of dropdowns for our clients.

Today I’d like for us to take a look at two popular types of dropdowns: one based on CSS only, and another based on jQuery.

The Standard WordPress navigation layout

Before we get into making dropdowns, we need to take a look at the way WordPress layouts it’s navigation. Both wp_list_pages and 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:

<ul class="menu" id="menu-main-menu">
<li class="menu-item menu-item-type-post_type menu-item-131" id="menu-item-131"><a href="#">Link</a></li>
<li class="menu-item menu-item-type-taxonomy menu-item-132" id="menu-item-132"><a href="#">Link</a>
<ul class="sub-menu">
	<li class="menu-item menu-item-type-taxonomy menu-item-140" id="menu-item-140"><a href="#">Link</a></li>
	<li class="menu-item menu-item-type-taxonomy menu-item-139" id="menu-item-139"><a href="#">Link</a></li>
	<li class="menu-item menu-item-type-taxonomy menu-item-142" id="menu-item-142"><a href="#">Link</a></li>
	<li class="menu-item menu-item-type-taxonomy menu-item-144" id="menu-item-144"><a href="#">Link</a></li>
	<li class="menu-item menu-item-type-taxonomy menu-item-138" id="menu-item-138"><a href="#">Link</a></li>
	<li class="menu-item menu-item-type-taxonomy menu-item-141" id="menu-item-141"><a href="#">Link</a></li>
	<li class="menu-item menu-item-type-taxonomy menu-item-143" id="menu-item-143"><a href="#">Link</a></li>
</ul>
</li>
<li class="menu-item menu-item-type-post_type menu-item-133" id="menu-item-133"><a href="#">Link</a></li>
<li class="menu-item menu-item-type-post_type menu-item-134" id="menu-item-134"><a href="#">Link</a></li>
<li class="menu-item menu-item-type-custom menu-item-135" id="menu-item-135"><a href="#">Link</a></li>
</ul>

As you can see, WordPress neatly (well neat besides all of 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 dropdowns work!

DropDowns with CSS Only

CSS only dropdowns are my favorite, as they allow you the functionality without the use of more Javascript. This means the sites loads faster and works if the user has JS turned off.

CSS only dropdowns work in IE7+ and all other modern browsers, so it’s the perfect way to go!

Since the HTML is already down for us, we just need to get the CSS itself going. Let’s start out by formatting our menu a bit, so the li’s float together, and have some space in between:

ul.menu, ul.menu li { float: left; }
ul.menu li { margin: 0 15px; }

Next, we should hide the sub-menu, so that only our top level items show:

ul.menu, ul.menu li { float: left; }
ul.menu li { margin: 0 15px; }
 
.sub-menu { display:none; }

Now we need to show the sub menu, when we hover over it’s parent link:

ul.menu, ul.menu li { float: left; }
ul.menu li { margin: 0 15px; }
 
.sub-menu li { display:none; }
ul.menu li:hover li { display:block; }

If you go ahead and test it, you can see it works, but it breaks the rest of our navigation! We need to apply a few more basic styles, so when hovering over the sub li items, it doesn’t push over the rest of the menu.

ul.menu, ul.menu li { float: left; }
ul.menu li { position: relative; margin: 0 15px; list-style: none; }
 
.sub-menu { position: absolute; float: none; width: 100px; padding: 0; left: 0; } 
.sub-menu li { display:none; margin: 0; padding: 0; }
ul.menu li:hover li { float: none; display:block; clear: both; }

View the demo

DropDowns With jQuery

For all you jQuery fans, there’s also an easy way to implement WordPress menus with jQuery dropdowns. 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.

Let’s take the basic CSS from the tutorial above and shed it down to just what we need for jQuery to work and the presentation to look nice:

ul li { position: relative; float: left; margin: 0 20px; list-style: none; }
 
ul ul { width: 100%; visibility: hidden; position: absolute; top: 100%; left: 0; padding: 0; }
ul ul li { position: static; float: none; width: 100%; margin: 0; }

Upon testing, you can see it looks pretty much the same, except that hover over the li with the sub-menu no longer shows the sub items.

First, make sure you attach a copy of jQuery to your document:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>

Now for our jQuery:

<script>
$(function(){
    $("ul li").hover(function(){
        $(this).addClass("hover");
        $('ul:first',this).css('visibility', 'visible');
    }, function(){
        $(this).removeClass("hover");
        $('ul:first',this).css('visibility', 'hidden');
    });
});
</script>

Test it and voila! You can also add fades and other animations to it.

View the Demo

About the author
Amber Weinberg specializes in clean and semantic XHTML, CSS and WordPress development. She has over 10 years of coding experience and is pretty cool to work with. Amber is available for freelance work, so why not hire her for your next project?

Tweet