Create drop-down menus with WordPress plugins and themes
Drop-down menus are a great way to improve the usability of your site. They allow you to offer more information without taking up too much real estate, as well as organize your content in a useful way for your readers.
But coding a drop-down menu can be a bit of a PITA (no, not the bread that holds the falafel). Lucky for us, some of our fellow web-geeks have created easy ways for us to add drop-down menus to our websites and WordPress blogs.
WordPress Drop-down menu plugins
1. The Linux and Web Development Blog has a WordPress plugin that adds a drop-down menu to your navigation bar on your WordPress blog. In order to activate this plugin, you need to upload it, activate it, and add the following code snippet to your header file:
<?php
if (function_exists('get_menu'))
get_menu('topmenu');
?>
Once you have done this, log in to your site, and customize the menu on the CSS Menu option page.
2. Ryan Hellyer has developed a super-duper plugin/generator combo that allows you to create and heavily customize a drop-down menu in your WordPress blog. Features:
- Easy to customize styles with his handy Suckerfish Dropdowns Generator
- W3C valid HTML and CSS
- Only uses Javascript for annoying browsers like IE6
- If you want your visitors to be able to access your menu with their keyboard, Ryan offers the “Suckerfish Javascript for keyboard accessibility” code for including in your site.
- Compatible with every existing browser (almost) and their uncles.
You can’t say Ryan’s not thorough! See the drop-down menu in action on the Suckerfish Dropdowns Generator page.
To use his Suckerfish WordPress plugin:
- Download the plugin from his site and activate it.
- Go over to his Suckerfish Dropdowns Generator and customize at will. You can change pretty much every style used for the drop-down: colors, background image, font sizes, families, weight, opacity, padding, etc. Ryan has also prepared 10 ready-made styles for drop-down menus that you can use instead of fiddling around with your own styles.
- Once you are ready, click Submit Query and the generator will produce some CSS code.
- Coyp and paste the code into your WordPress admin (under Options). The generated styles will only work with unordered lists with an ID of #suckerfishnav. In addition, this whole plugin/generator thing may not play nice with our least-favorite browser (IE6), so Ryan recommends using his handy Suckerfish Javascript for Internet Explorer code with your site.
3. Dtabs (Dynamic Tabs) wordpress plugin by David Burton allows themes to include an optional user controlled dynamically tabbed navigation system with the possibility of drop down menus. This plugin only works with dTab enabled themes, of which there is currently one: Kubrick Tabs. However, the author provides instructions on how to dTab enable a theme on the plugin page. You can see a working example on the author’s site. The plugin is also available on the WordPress.org plugins directory.
4. A few more drop-down menu plugins:
WordPress Themes with drop-down menus
1. The Jillij theme is a one-column theme based on Kubrick that has transformed the vertical sidebar into a horizontal drop-down navigation bar that appears under the header image. The drop-down menu is based on Widgets, so you can modify what appears on the nav bar by changing the widgets.
2. Ryan Hellyer has also created a theme that has his Suckerfish menu built-in: Aqua Vaccinium WordPress theme. I have to admit that I don’t love the look of the theme (sorry Ryan!), but the built-in Suckerfish menu can be useful for people who prefer not to use a plugin.
(Ryan does have a theme which I really like, which he uses on his blog: Hellish Simplicity.)
Thanks for the dropdowns review Miriam
FYI, my plugin automatically adds the Javascript to keep IE5-6 happy so you don’t need to worry about that.
Most of the features you mentioned are only available in the beta plugin. Although I will probably update the stable version with that shortly – I’ll post a comment here once I’ve done that. In the mean time it’s probably safe to assume the beta is fine for use in a live site as I haven’t received any reports of it not working yet.
The keyboard accessible javascript is available as an option in the admin panel. I didn’t include the keyboard accessibility option by default as most people don’t bother with it – although I think it is a good idea as I assume there are some people who tend to ‘tab’ there way through links and they’ll totally bypass your menu if you don’t have that javascript activated.
Apart from my own plugin (which I obviously like the most, duh!) I prefer Zack Designs plugin as it creates nice bug free code which works nicely cross browser. I’m damned if I’ll be making a CSS generator for it though because there are lots of quirks with the way those CSSPlay style dropdowns work. They use some rather exotic methods to force older versions of IE to behave correctly which makes them quite difficult to style as you suit, or at least I found them difficult the last time I tried to modify one.
I’m not sure why, but something which my plugin does which I haven’t seen others do is to allow users to choose what is displayed in their dropdown menu. With the latest beta (soon to be stable release) you can choose from a combination of archives, categories, pages etc. and what order they are in your dropdown menu.
Something which I have had lots of requests for, but haven’t figured out a good way to implement yet, is the ability to exclude certain categories, pages etc. from the dropdown menu. But I am working on that and will maybe have a future release with that option included.
BTW Miriam – we seem to have very different preferences for themes
Although you seem to agree with my previous client, as the reason I made that theme available to the public was because they didn’t like it.
I’ve now updated the stable version to 1.6.1 (was originally the beta).
very good list of drop downs for word press I like the idea of adding themes that have this function already included.
Theme makers can include support for my plugin with the following code:
<?php if (function_exists('suckerfish')) {suckerfish();} ?>Hi,
I’ve tried using this in my site, but instead of making the menu droppable it just messed my entire menu structure so I had to remove it.
Isn’t there any simple plugin that helps managing pages without the need to mess with code?
Thanks,
Raymond
Nope, it’s not possible to do it without messing with the code.
If you need help getting my plugin to work on your site, then leave a comment for me on the WordPress dropdown menu plugin page and I’ll see what I can do. Usually the problem is just a simple CSS issue.
Actually … you could have a menu which was positioned at the very top of the page without messing with code, but anything which is displayed further down you would need to delve into the code for as it will need to interact with the existing code on the page whereas you can ignore the rest of the code if you are displaying it at the top of the page.
[...] Create drop-down menus with WordPress Plug-ins and themes [...]
[...] ??WordPress???????????????? [...]
I sorry, my ingles is very bad…
but I´m like see a example??? Someone
send me a email With subjet “menu wordpress”
thx
Diego.
diego.burgos@gmail.com
[...] Create drop-down menus with WordPress Plug-ins and themes [...]
This article is a great resource and I’ve been sending lots of people to it. Thanks for writing it up!
Miriam – you have a dead link above to the following URL: http://wpgarage.com/wp-admin/Suckerfish%20Dropdowns%20Generator
Ryan, thanks for pointing that out. That link is just weird! I’ll fix it.
Ryan, I linked to the new link on your Pixopoint site. Can you tell me if the link is correct now?
Yep, looks good.
Hi Ryan
This is a great plugin I would like to implement it on blogs for clients how ever I have two problems.
1. If I want to use the drop down menu as the blogs main navigation, how do I create custom top level navigation
(exp: say a client has a categorie named listing and I want listing to be the top tier how do I accomplish that.
2. The second thing I noticed is that is that when you click on the dropdown menu as it’s loading you see the
vertical default menu. I thought it was something I was doing wrong but it also happens on your demo page.
Hi Glen,
I’m guessing you are using Opera or Safari then? It sounds like the CSS hasn’t fully loaded by the time you clicked on it. Firefox usually doesn’t suffer this problem as it holds of on rendering the menu till the CSS has loaded.
You can reduce this effect by moving the CSS instructions to earlier on your HTML. That way it should be loaded before the menu is (hopefully).
[...] ??WordPress???????????????? [...]
[...] ??WordPress???????????????? [...]
[...] Create drop-down menus with WordPress Plug-ins and themes [...]
This is awesome blog post. I will incorporate this into my blog.
[...] Drop-down menus with WordPress Themes and Plugins | WordPress Garage (tags: wordpress menu plugin) [...]
Thanks for your post. I have been looking for a way to incorporate different levels in the top menu. And this is very useful.
Thanks for this great post… off to install it with no fear!
[...] are many tutorials out there for creating a WordPress drop down menues. You might want to check here and [...]
Thank’s for share your info…. I will try this in my blog
[...] are many tutorials out there for creating a WordPress drop down menues. You might want to check here and [...]
Hi all,
just wondering if there’s any updates on WordPress.org drop downs for my business webpage?
(I understand my free hobby site at wordpress.com can’t have drop downs yet as they don’t support Javascript… any suggestions for working around that if I have lots of static pages that I need to file under certain “chapters”? EG: If there’s no way to actually have a Navbar header drop down, is there a way to have the Chapter header link to say 10 sub-pages neatly?)
@Eclipse Now – I don’t believe that is possible on WordPress.ocom sorry.
Tried wordpress-css-drop-down-menu.2.3.3 plugin yesterday, not working at all… Will try out this new plugin tonight. Thanks!
[...] Create drop-down menus with WordPress Plug-ins and themes [...]
[...] ??WordPress???????????????? [...]
[...] Create drop-down menus with WordPress plugins and themes [...]
Did you know a menu drop-down incorpored in the wordpress for vertical menu / categories. I did not find any… I want to use it on this website http://www.atlastur.ro
Thank you!
Very good post here, I really like the Suckerfish plugin you’ve receommended. Can I ask:
Does this plugin, or do any others you are aware of, offer multi-columns when the drop down opens. I don’t want to spam a link to you as an example, so let me know if you want me to email it… but my guess is you probably know what I’m referring to.
Thanks in advance for your insights.
jh
@Eclipse Now – the Titan theme on WordPress.com now supports a dropdown menu.
@Jeff Hopeck – The PixoPoint Menu plugin replaced my “Suckerfish plugin” a long time ago … http://pixopoint.com/products/pixopoint-menu/
Multi-columns are a CSS issue, not a plugin issue. So all of those plugins can presumably do multi-column dropdowns.
I am trying to figure out where to place the code
<?php if (function_exists('pixopoint_menu')) {pixopoint_menu();} ?>To pick up the drop down menu I created with the plugin from Pixpoint. My template (Cutline by Chris Pearson) is supposed to be drop down ready.I want the drop down to appear in the header in stead of the nav bar that is there now.
I don’t know whether the php code goes into the navigation.php, header.php or what? I would appreciate some guidance setting this up as this is the last major hurdle to having my site running smoothly.
Thanks,
Esti
@Esti – The answer to that is impossible to know without reading the source code.
In most themes it is the header.php file, but if you have a navigation.php file then it’s probably in there that you need to put it.
This is a very good list!
I would like to add:
Likno Web Modal Windows Builder (software for creating JavaScript popup windows/dialogs for web pages)
http://www.likno.com/jquery-modal-windows/index.php
AND
Likno Web Tooltips Builder (software for creating HTML tooltips for web pages)
http://www.likno.com/jquery-tooltips/index.php
I want to use a dropdown menu which you are using in this theme… may i know what menu code you using for your site… its really cooll