Dropdown Menus Plugin for WordPress

Robert O'Rourke
Development Plugins Releases WordPress

I’ve been enjoying the WordCamp event down in Portsmouth immensely this weekend. It’s always good to catch up with folks I know and meeting folks I didn’t know like those very sound chaps from humanmade.

To get to the point of this blog post though I have written a plugin in response to a comment made by Rachel McCollin during her talk on WordPress and Mobile.

When designing for small screens every pixel counts. One of the common difficulties we face as web designers is how to reduce the amount of pixels some large (or potentially large) constructs like menus take up. One solution is to use a dropdown menu. For example in a responsive design like that seen on informationarchitects.jp or fivesimplesteps.com at smaller screen sizes the more traditional menu of links is replaced by a dropdown.

Rachel’s point was that there isn’t an easy way to make a menu that you manage via the admin panel into a dropdown. Because I’ve worked a lot recently with custom menu walkers I decided that it should be and couldn’t help myself…

So, here it is. A plugin that provides an alternative function to wp_nav_menu(); that will output the menu as a dropdown and also provides a widget that can be dropped into a widget space.

There are likely to be a few improvements and tweaks that can be made to awesome it up a bit but if nothing else it’s a start. You can find the dropdown menus plugin in the WordPress repository here. Hope it comes in handy for some of you.

To use it you either use the function dropdown_menu() in place of wp_nav_menu() or use the widget provided with the plugin.

There’s some more background on how to use this in a responsive design (as well as an alternative method using only javascript) here on Chris Coyier’s css-tricks.com.

64 responses to “Dropdown Menus Plugin for WordPress

  1. this is great, thanks for sharing it! Just so you know though I thought it was broken when I first tried it because this didn’t work even though that works with the normal wordpress menu function…

    1. Cheers Brent – I’m a little confused by your comment though, can you elaborate on what seemed to be or what was broken?

      1. Yeah WTF was I thinking there? not sure what went wrong but I’m back on your site to try out the plugin again, if I remember what went wrong I’ll let you know, sorry for the vague comment — you should add a ‘subscribe to comments’ feature to your site, (I think there’s one in jetpack and there’s also a plugin for it floating around, I noticed that a lot of the comments (including my own) didn’t get follow ups cause people forget they left the comment and don’t get notified when you respond.

        1. Yep – good idea on subscribing to comments. Our site sometimes suffers from the cobbler’s children problem – we’re so busy at the moment on client work that we forget to look after our own stuff!

  2. Thanks a lot for this plugin, Robert. I used it for a responsive design project that I just finished: adsinstitute.org. If you’re ever in St. Louis I owe you a beer.

    Cheers,

    1. No problem, and nice website too!

  3. This plugin is awesome, It saved me a lot of time building the mobile responsive version of a clients website. Thanks!

  4. Hi there – just found your plugin, and think it is fantastic – you’ve saved me a lot of time and headaches… but…

    The base theme that I plan on using this with (from which I’ll be building all my future wordpress sites from) features three different navigation menus… but I didn’t fancy the idea of having three drop down lists – I much prefer the idea of one single menu that included all the items from the three (maybe via the use of optgroup or something).

    I have some ideas on how I can modify your code for this purpose, but I wanted to ask if you had any insight into the best way of doing this?

    Thank you.

    1. Just a quick update – had a minor brainwave – maybe, rather than mess about trying to mod your code (half of which I don’t understand anyway), maybe I should just create a 4th menu, specifically set-up for the purpose of the mobile view, and just populate this as required… Seems like the easiest option to me.

      1. Hi Daniel, and thanks!

        If you’re adding the dropdown menu using the template tag then I agree, a separate menu might be the best solution. The only reason I don’t use optgroups in the dropdowns is because you can only have one level of them, and also the label of optgroup is not selectable so it wouldn’t represent the menu properly.

        If you were to hack/mod the code I’ve sprinkled a ton of hooks and filters throughout it so if there’s something specific you wanted to change let me know and I can help you further.

  5. Nice Plugin!

    Thought I’d point out that the dropdown-menu class you’re using causes a conflict with twitter bootstrap which contains this unfortunate gem:

    .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    float: left;
    display: none;
    min-width: 160px;
    padding: 4px 0;
    margin: 0;
    list-style: none;
    background-color: #ffffff;
    border-color: #ccc;
    border-color: rgba(0, 0, 0, 0.2);
    border-style: solid;
    border-width: 1px;
    -webkit-border-radius: 0 0 5px 5px;
    -moz-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
    *border-right-width: 2px;
    *border-bottom-width: 2px;
    }

    Not your problem exactly, but it might worth namespacing the css to something more generic.

    -sean

  6. Not your problem exactly, but it might worth namespacing the css to something more generic.

    er, less generic 🙂

    1. Lolz. I’ll add an additional class and a filter for the class name. Don’t want to break anyone’s site after all!

    2. There’s a new version 0.7 which gives you a filter ‘dropdown_menus_class’ – just return the desired class name in your callback.

      1. Man, that was fast. Thanks Robert.

  7. Great work Robert – I was just about to write my own plugin when I found yours 🙂

  8. Hi Robert,

    Just installed this locally and the dropdown shows up, but when I select a menu item it doesn’t fire – it just stays on the same page. I might be missing something basic – does it have to go in some sort of tag?

    I was thinking of writing a little bit of jQuery to do it but thought I’d see if you had any ideas first.

    I just pushed it on to our staging server in case you have a sec to take a quick peek (its just below the image fader, on the left – not styled yet):
    http://1glasswharf.realadventure.net/

    Thanks
    Jordan

    1. Hi Jordan,

      It’s possible there’s some conflict with the js. The plugin should generate a bit of code that looks for anything with the appropriate class name and triggers the page change…

      Can you confirm that your theme has a call to wp_footer(); in the footer template?

      1. It didn’t, it does now, it works.

        Brilliant, thanks a lot!

        1. 🙂

          1. Hi Robert,

            Very nice plugin! Thank’s for that!

            I’m having the same problem, when I select a menu it doens’t open the link, and stays on the same page.

            I have the wp_footer(); in my footer.php template already.

            What else can be?

            Thanks!
            André

          2. Seems to be working for me, what browser is it not working in?

  9. Hi Rober,

    I have installed the plugin, added the code in the function.php of my theme, and uploaded the drop menu to the theme’s root.

    It doesn’t work, so I tried to remove the code and the folder, and it breaks the website with ‘syntax error, unexpected… line 158’. I put the code and folder back just to have the site up. Still, the drop down won’t work.

    Did I miss something, and how do I restore the site to what it was before the drop-down plugin without error?

    1. Hi Lis,

      If you have the plugin installed you don’t need to include it in your theme. Can you tell me what theme you’re using, and also what the full error message is?

  10. Hi, Robert.
    Thanks for your plugin. Unfortunately it does not work with WordPress 3.4. It shows in the plugins list but not in the Appearance or Settings. Can you fix that? I am using a custom theme.

    1. The plugin only adds a widget, there are no settings for it. Check the plugin page on wordpress.org for instructions on how to use it. It’s only used as a widget or via a template tag (dropdown_menu()) you put into your theme’s code.

  11. After the upgrade to WordPress 3.4.1, the drop down no longer works with IE. works fine with Firefox however. Any suggestions would be appreciated..

    1. Can you tell me which version of the plugin you’re using?

      1. version 0.8

  12. I am having the same problem as many others. When an item is clicked from the drop down menu, nothing happens. It stays on the same page. I do not know how to add or delete code, and don’t understand why it’s happening on this website and not on the other 3 on which I have the plug in. Can you please help, and in a timely manner? Thanks! Kelli

    1. Hi Kelli,

      It sounds like the theme you’re using is missing the wp_footer() function call in the footer.php file. Can you check that for me?

      1. I don’t know how to do that. Can you access my site? It’s http://www.weightforme.net Thanks.

  13. I’m having trouble with the dropdown not firing either in IE9. It works great in Chrome. The theme calls wp_footer() in the footer.php.
    Here is where I’m using it. http://www.salient.com/our-services/training/courses/100-bookmarkdashboard-development-shadowing/

    1. Hi Paul – I just checked it briefly in IE10 and it worked fine – have you tested this on more than one machine?

      1. I just tried in IE8 and I’m seeing this error on the page:

        Webpage error details

        User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; InfoPath.2; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729)
        Timestamp: Thu, 23 Aug 2012 17:43:55 UTC

        Message: ‘console’ is undefined
        Line: 604
        Char: 4
        Code: 0
        URI: http://www.salient.com/our-services/training/courses/100-bookmarkdashboard-development-shadowing/

        1. Just looked up what’s on line 604 and this is it. console.log(dropdowns);

          Inside the larger chunk of code:

          var getElementsByClassName=function(a,b,c){if(document.getElementsByClassName){getElementsByClassName=function(a,b,c){c=c||document;var d=c.getElementsByClassName(a),e=b?new RegExp(“\\b”+b+”\\b”,”i”):null,f=[],g;for(var h=0,i=d.length;h<i;h+=1){g=d[h];if(!e||e.test(g.nodeName)){f.push(g)}}return f}}else if(document.evaluate){getElementsByClassName=function(a,b,c){b=b||"*";c=c||document;var d=a.split(" "),e="",f="http://www.w3.org/1999/xhtml&quot;,g=document.documentElement.namespaceURI===f?f:null,h=[],i,j;for(var k=0,l=d.length;k<l;k+=1){e+="[contains(concat(' ', @class, ' '), ' "+d[k]+" ')]"}try{i=document.evaluate(".//"+b+e,c,g,0,null)}catch(m){i=document.evaluate(".//"+b+e,c,null,0,null)}while(j=i.iterateNext()){h.push(j)}return h}}else{getElementsByClassName=function(a,b,c){b=b||"*";c=c||document;var d=a.split(" "),e=[],f=b==="*"&&c.all?c.all:c.getElementsByTagName(b),g,h=[],i;for(var j=0,k=d.length;j<k;j+=1){e.push(new RegExp("(^|\\s)"+d[j]+"(\\s|$)"))}for(var l=0,m=f.length;l<m;l+=1){g=f[l];i=false;for(var n=0,o=e.length;n<o;n+=1){i=e[n].test(g.className);if(!i){break}}if(i){h.push(g)}}return h}}return getElementsByClassName(a,b,c)},
          dropdowns = document.getElementsByTagName( 'select' );
          console.log(dropdowns);
          for ( i=0; i<dropdowns.length; i++ )
          if ( dropdowns[i].className.match( 'dropdown-menu' ) ) dropdowns[i].onchange = function(){ if ( this.value != '' ) window.location.href = this.value; }

          1. Update: I deleted that line out of the PHP file and now it works fine.

        2. Hey – I updated the plugin to version 0.9 to fix the issue – was a real rookie mistake to leave that in. Sorry 🙁

  14. I just tried in IE8 and I’m seeing this error on the page:

    Webpage error details

    User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; InfoPath.2; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729)
    Timestamp: Thu, 23 Aug 2012 17:43:55 UTC

    Message: ‘console’ is undefined
    Line: 604
    Char: 4
    Code: 0
    URI: http://www.salient.com/our-services/training/courses/100-bookmarkdashboard-development-shadowing/

  15. Plug in is installed on our website but it does not work correctly in Firefox. The menu drops down but always to the far left of the screen i.e. if my first tab is Home and my third tab is Business Systems, the drop down for business systems appears under the Home tab. As a result you cannot click on the options because when you move over it disappears. Can this be fixed?? Works great in Chrome.

    1. Can you post a link to what you’re working on? It’s impossible to say otherwise!

  16. Thanks for this plugin. I was wondering if there’s anyway to have it display just the subpages and not the entire menu hierarchy.

    1. I meant display the subpages, but not the hierarchy above the currently selected item.

  17. Is there a way to eliminate the blank item as the first in the list? Thanks for the efforts!

    1. I should add that as a part of the menu there is already a blank item so I want to use that instead. I added the blank item text filter, but the most I can get it to do is to have a blank first item. But I want to eliminate that altogether and use the one that I have as a part of my menu list. The reason I have that is for use of the menu elsewhere so I want to leave it that way. Thanks again for the effort!

  18. Hi There, how do i add it to a page instead of using the widget?

    1. Hi Greg, you’d have to use the template tag dropdown_menu().

      If you’re not able to edit the templates I’m afraid there’s no shortcode or other method to do this yet.

  19. Thanks for your plugin. I use it on many sites now. Is it possible to always have the blanking text displayed rather than the current menu item? For example if my blanking text is ‘Books’ and a menu item is ‘Fiction books’, once the user goes to the ‘Fiction books’ page the menu displays ‘Fiction books’ rather than ‘Books’.

  20. Hi there, I downloaded the plug in. I tried to use it but something REALLY weird happens that I still cannot fathom.

    I cannot see the select menu on the page. The WEIRD thing is that if I view the page source, I can see the html menu. But it is invisible on the page…how the heck can this be??? driving me nuts! 🙂

    1. It will depend on your theme. There’s probably some CSS hiding the dropdown from view. It might be that some styling for small screens is at play so the dropdown will appear when you browse on a mobile or shrink the browser window down.

  21. hello there! i’m trying the plugin, and apparently the “make it go” it’s not working at all, i would try to fix it but maybe i’m doing something wrong… any ideia?

  22. Sorry for the comment below!!! the wp_footer() was missing =)

  23. Hi, I am using a wordpress theme called rt-theme-17 which uses your awesome plugin for the dropdown menu in responsive “mode”. It works pretty well, but when I use this the access control plugin – http://wordpress.org/extend/plugins/wordpress-access-control/ – it breaks the dropdown menu.

    I canøt figure out what is going wrong and why, can you help me?

  24. ужас, че за лажа, обновила плагин и вообще все так ужасно стало… был нормальный сайт, а теперь не знаю как все вернуть.

  25. hi there
    I upgraded wordpress to 3.9.2 and am getting this :

    Strict Standards: Declaration of DropDown_Nav_Menu::end_lvl() should be compatible with Walker_Nav_Menu::end_lvl(&$output, $depth = 0, $args = Array) in /home/tomfawth/public_html/wp-content/themes/goodspace-v1-08/include/plugin/dropdown-menus.php on line 0

    Strict Standards: Declaration of DropDown_Nav_Menu::start_el() should be compatible with Walker_Nav_Menu::start_el(&$output, $item, $depth = 0, $args = Array, $id = 0) in /home/tomfawth/public_html/wp-content/themes/goodspace-v1-08/include/plugin/dropdown-menus.php on line 0

    Strict Standards: Declaration of DropDown_Nav_Menu::end_el() should be compatible with Walker_Nav_Menu::end_el(&$output, $item, $depth = 0, $args = Array) in /home/tomfawth/public_html/wp-content/themes/goodspace-v1-08/include/plugin/dropdown-menus.php on line 0

    I am using the goodspace theme on wordpress !

    my site is now broken white screen!

    can you help?

    thanks

    bo

Leave a Reply

Your email address will not be published. Required fields are marked *