Amber Weinberg: Freelance Web Developer specializing in semantic WordPress, Mobile, CSS and HTML5 Development

The Blog

Easy WordPress DropDown Menus

Posted on 10/25/10 in blog, development about , , , , ,

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

Amber Weinberg specializes in clean and semantic HTML5, CSS3, responsive and WordPress development. She has over 15 years of coding experience and is super cool to work with. Amber is available for freelance work, so why not hire her for your next project?

Like this post? Please share it on Twitter or Facebook.

  • http://www.alan-horne.com/blog Alan

    Excellent stuff Amber, I have been looking for a tutorial on this recently.

  • http://www.5alarmint.com Jamal

    Great article. I was looking for a tutorial like this too.

  • http://www.amberweinberg.com Amber Weinberg

    No problem guys, glad it can help!

  • http://www.avivajohnson.com Aviva

    Awesome, thanks for the tutorial! I’m excited to give it a try.

  • http://www.blog.adrice.co.uk Adie

    Nice post Amber.

    I’ve been doing a similar tutorial today using purely CSS3 with CSS3 Transition effects and it’s nice to compare.

    Top work

  • http://www.scottcarmichael.co.uk Scott

    Thanks for the post Amber, i’m always on the look out for simple dropdown menus.

  • http://codegirls.blogspot.com/ Pearl Z

    Yea this looks great. Easy is the word

  • http://www.dhtml-menu-builder.com/ lucky_girl

    Great post. You seem to have a good understanding that how to create a professional drop down menu. When I entering your blog, I felt this. Come on and keep writing your blog will be more attractive. To Your Success!

  • http://ee-design.dk Emil

    Awesome mate – Just what I was looking for!
    Thanks!

  • http://www.ankursharma.net Ankur

    This is a nice post. Really helpful :)

    I also got similar info. in http://www.7tech.co.in/wordpress/how-to-add-a-wordpress-drop-down-menu-to-your-wordpress-theme/ which is also good. 😉

  • http://neuroneweb.com Xeon

    It really great that you cut it short and no extra styling .. its easy to understand

  • Robert

    Best way to get easy, clear and working menu in WP i`ve ever met! THANK YOU!

  • http://www.richard-dickinson.com Richard

    Hi Amber
    Nice post. I shall be a bit picky on the CSS demo-when hovering over the second link, the sub links appear below the third main link and this is somewhat confusing-it would help maybe to add some styling to the drop down that clearly shows these sublinks are from the second link!

    I’m having problems displaying sublinks on my WP blog at the moment-it’s driving me nuts!

    BTW-I like your blog/site redesgn-shows I haven’t stopped by in a while.
    Best wishes

  • http://www.richard-dickinson.com Richard

    I have fixed my submenu nav display problems on my WP blog.
    I tried several ways to code this but in general I resorted to using the default 2010 coding except that my blog uses html5 element unlike 2010 that uses for it’s menu.
    So I compromised with and now it works fine!
    See http://richard-dickinson.com/
    Now on to the next coding challenge…:-)

  • Pingback: Creating a multi-level jQuery WordPress dropdown menu | AJOM's Wordpress Notebook()

  • Pingback: Creating a jQuery/CSS multi-level dropdown menu in WordPress | AJOM's Wordpress Notebook()

  • Pingback: Best 10 Useful WordPress Snippets - JustWP - WordPress Themes, Plugins, Tutorials, Opinions()

  • Pingback: Essential Snippets For Your WordPress Blog - JustWP - Best WordPress Website Themes, Plugins, Tutorials, Tips For Beginners()