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, 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.
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.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?
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?
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
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?
It didn’t, it does now, it works.
Brilliant, thanks a lot!
🙂
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é
Seems to be working for me, what browser is it not working in?
Great work Robert – I was just about to write my own plugin when I found yours 🙂
er, less generic 🙂
Lolz. I’ll add an additional class and a filter for the class name. Don’t want to break anyone’s site after all!
There’s a new version 0.7 which gives you a filter ‘dropdown_menus_class’ – just return the desired class name in your callback.
Man, that was fast. Thanks Robert.
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
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.
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.
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.
This plugin is awesome, It saved me a lot of time building the mobile responsive version of a clients website. Thanks!
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,
No problem, and nice website too!
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…
Cheers Brent – I’m a little confused by your comment though, can you elaborate on what seemed to be or what was broken?
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.
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!