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.
62 responses to “Dropdown Menus Plugin for WordPress”
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! 🙂
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.
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’.
Hi There, how do i add it to a page instead of using the widget?
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.
Is there a way to eliminate the blank item as the first in the list? Thanks for the efforts!
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!
Thanks for this plugin. I was wondering if there’s anyway to have it display just the subpages and not the entire menu hierarchy.
I meant display the subpages, but not the hierarchy above the currently selected item.
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.
Can you post a link to what you’re working on? It’s impossible to say otherwise!
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/
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/
Hi Paul – I just checked it briefly in IE10 and it worked fine – have you tested this on more than one machine?
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/
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",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; }
Update: I deleted that line out of the PHP file and now it works fine.
Hey – I updated the plugin to version 0.9 to fix the issue – was a real rookie mistake to leave that in. Sorry 🙁
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
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?I don’t know how to do that. Can you access my site? It’s http://www.weightforme.net Thanks.
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..
Can you tell me which version of the plugin you’re using?
version 0.8