Dropdown Menus Plugin for 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.

Comments
  • Bruno 26 / Apr / 2013 at 9:27 pm

    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?

  • MoebiusMania v4 | MoebiusMania 8 / Apr / 2013 at 1:47 pm

    [...] questo blog rimanesse in vita anche in questa nuova epoca “mobile”. Grazie al plugin Dropdown Menus e jQuery da all’incirca 980 pixel in giù la navigazione viene gestita con il componente [...]

  • David T. 26 / Mar / 2013 at 11:36 pm

    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! :)

    • Robert O'Rourke
      Robert O'Rourke 27 / Mar / 2013 at 12:23 pm

      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.

  • sean 7 / Mar / 2013 at 11:46 pm

    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’.

  • Greg 1 / Mar / 2013 at 11:46 am

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

    • Robert O'Rourke
      Rob 15 / Mar / 2013 at 1:05 pm

      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.

  • Jay 20 / Feb / 2013 at 10:13 pm

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

    • Jay 20 / Feb / 2013 at 10:16 pm

      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!

  • Dov 7 / Feb / 2013 at 6:41 pm

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

    • Dov 8 / Apr / 2013 at 1:24 pm

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

  • Luis Johnson 30 / Jan / 2013 at 8:43 pm

    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.

    • Robert O'Rourke
      Robert O'Rourke 5 / Feb / 2013 at 11:16 am

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

  • Paul Stonier 23 / Aug / 2012 at 6:52 pm

    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/

  • Paul Stonier 23 / Aug / 2012 at 2:59 pm

    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/

    • David Coveney
      David Coveney 23 / Aug / 2012 at 5:04 pm

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

      • Paul Stonier 23 / Aug / 2012 at 6:52 pm

        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/

        • Paul Stonier 23 / Aug / 2012 at 7:03 pm

          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; }

          • Paul Stonier 23 / Aug / 2012 at 7:39 pm

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

        • Robert O'Rourke
          Robert O'Rourke 28 / Aug / 2012 at 10:20 am

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

  • Kelli Roig 24 / Jul / 2012 at 6:38 pm

    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

  • Randy Costa 23 / Jul / 2012 at 3:44 pm

    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..

  • li wei 28 / Jun / 2012 at 8:56 am

    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.

    • Robert O'Rourke
      Robert O'Rourke 28 / Jun / 2012 at 11:01 am

      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.

  • Lis 10 / Jun / 2012 at 2:16 am

    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?

    • Robert O'Rourke
      Robert O'Rourke 11 / Jun / 2012 at 9:59 am

      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?

  • Jordan 12 / Apr / 2012 at 12:51 pm

    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

    • Robert O'Rourke
      Robert O'Rourke 12 / Apr / 2012 at 5:12 pm

      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?

      • Jordan 12 / Apr / 2012 at 5:44 pm

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

        Brilliant, thanks a lot!

        • Robert O'Rourke
          Robert O'Rourke 12 / Apr / 2012 at 5:45 pm

          :)

          • André 12 / Apr / 2012 at 7:41 pm

            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é

          • Robert O'Rourke
            Robert O'Rourke 13 / Apr / 2012 at 11:22 am

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

  • Ed 5 / Apr / 2012 at 11:38 pm

    Great work Robert – I was just about to write my own plugin when I found yours :)

  • Sean Girard 29 / Mar / 2012 at 10:14 pm

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

    er, less generic :)

    • Robert O'Rourke
      Robert O'Rourke 30 / Mar / 2012 at 12:01 pm

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

    • Robert O'Rourke
      Robert O'Rourke 30 / Mar / 2012 at 12:20 pm

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

      • Sean Girard 30 / Mar / 2012 at 3:56 pm

        Man, that was fast. Thanks Robert.

  • Sean Girard 29 / Mar / 2012 at 10:13 pm

    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

  • Daniel 22 / Feb / 2012 at 4:21 pm

    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.

    • Daniel 22 / Feb / 2012 at 4:25 pm

      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.

      • Robert O'Rourke
        Robert O'Rourke 22 / Feb / 2012 at 5:58 pm

        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.

  • Lorenz 9 / Feb / 2012 at 2:07 pm

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

  • John Sellars 3 / Feb / 2012 at 12:05 am

    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,

  • Brent 2 / Jan / 2012 at 12:52 am

    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…

    • Robert O'Rourke
      Robert O'Rourke 3 / Jan / 2012 at 12:57 pm

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

      • Brent Lagerman 4 / Aug / 2012 at 4:17 am

        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.

        • David Coveney
          David Coveney 6 / Aug / 2012 at 11:13 am

          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!

  • Mark 2 / Aug / 2011 at 4:52 pm

    Hello Robert,
    i am trying to use your wp plug-in
    the menus look nice but only show -navigate- as menu titles
    i would like to assign proper names to the menus or display the already given menu names
    i am not too familiar with things like php
    may be there is an easy way to solve this
    - i using a wp theme called ‘tanzaku’

    • Robert O'Rourke
      Robert O'Rourke 3 / Aug / 2011 at 10:42 am

      Hi Mark,

      There is a filter you can use to override that text, alternatively in the version I released just now you can now pass in an argument of ‘dropdown_title’ into menu arguments array. Check the plugin page on wordpress.org for the latest update and some extra documentation.

  • Chris Garrett 19 / Jul / 2011 at 6:29 pm

    Interesting approach Robert, seems to work well! I’ve been looking at leveraging Javascript to achieve something similar, although nesting becomes tricky with that, and we also introduce the requirement for JS which is controversial.

    • Robert O'Rourke
      Robert O'Rourke 20 / Jul / 2011 at 10:12 am

      Cheers Chris,

      There’s a snippet of jQuery code here on css-tricks.com to do it via javascript which I guess is a tidier way to do it since it relies on javascript anyway but you’re right, the nesting thing would require an extra bit of logic to indicate which options were sub menu items. Not a lot mind you…

      I should build it in as an option but not sure how to get extra fields into the menu admin itself yet, I can just do the individual menu items.

  • [...] WordCamp UK 2011 – Tasting the Rainbow 18 / Jul / 2011 Dropdown Menus Plugin for WordPress [...]

1 2
css.php