Drop Down and Give Me Twenty Menu Items?!
Dropdown menus are a good way to annoy your website visitors, and they’ve been doing it for years! The truth is, they can be handy, but there tends to be an irresistible temptation to make them gigantic. I’m going to talk about the problems caused by this and offer possible solutions.
Examples of funny things people have put on their sites – links to them get stuffed into site menus:
- Every company brochure (bonus points for each PDF)
- Multiple photo sliders filled with every phone photo ever taken
- A profile of every company employee (bonus points for each one’s pet)
- A list of the boss’s favorite colors and movies. Yes, I was asked to put that on a site once. Some marketing person must have told him that it would make him seem relatable.
Do those sound interesting to you? Me either. Still, it’s possible to have worthwhile stuff in a menu, too. Combine that with the treasure trove above, and you end up with a massive menu if you do a new page for every item. We site owners believe that every bit of our content is precious, so more is always better.
Size Isn’t Everything If It’s The Only Thing
Except that it isn’t. To your visitors, these huge dropdowns are a navigation nightmare, even if they seem to work. The simplest problem is a dropdown that’s just too long. It’s easy to miss the target when you’re trying to click on an item, and of course they may go right off the screen: a usability nightmare that you may not even notice if you tend to look at your site on a desktop computer.
Annoy Visitors And Sell Nothing
What’s even worse: using multiple levels. 2, 3, 4 or even more. These are the menus that not only drop down vertically, but also fly out horizontally. Anything wide will tend to compromise a site on mobile. Menu items just vanish altogether, or at least are hard to get to. People leave sites very fast that are hard to use, and there goes any sales!
What’s a site owner to do? There’s no need to rule out dropdowns. It’s a way to keep related things grouped, or to show hierarchical data. If a dropdown contains under 5 items you may be OK. I like to keep it down to 2 or 3. Or banish them entirely!
SubMenus Are An Answer To the Overcrowding Question
But what if you have lots of pages, they truly are important, and you want to group them? It’s possible to make this work with a submenu. A nice scheme for that goes like this: you have a main horizontal menu, and a space below it for the submenu. You click on a main menu item, and if there are other items that are “children” of that item, they appear in the submenu just below the main menu.
No dropdowns, just a submenu that doesn’t vanish when you’re trying to click on it! If properly coded, this eliminates both the “too tall” and “too wide” problems. I’ve written a tutorial on how to put one of these together for WordPress. The example does use Genesis, but you can do this with nearly any WordPress theme if you’re skilled.
Submenus are my favorite way to deal with large menus. But they are tricky to put together, even if you’re geeky. For a very quick example go to my demo page and click one of the links in the upper left corner.
Sidebar, Please, Your Honor
Another nice way to organize data is to have a sidebar menu showing child pages of your current page. For that method, here’s a method that’s much easier than the above scheme! No code needed! Just install Advanced Sidebar Menu, put its widget into your sidebar, change settings to taste, and relax! I actually began coding this concept from scratch, and got just about as far, but this has more control and extra features.
Stuck In The Middle With You
You want more? How about putting links to child pages right in your page content? Install the clever List Pages Shortcode plugin, and just put this shortcode into your page content. Try to give it a line by itself – it’s easy to butcher shortcodes. You can always correct it by clicking “Text” instead of “Visual” in the editor:
This deceptively simple plugin has a lot of additional features you can add by using additional shortcode parameters, probably more than you’ll need. It’s hot! I should also note that in many themes you could add its shortcodes to widgets for sidebars, footers, header, and so on.
MegaMenus – More Is More
Still not satisfied? Really? 😉 Maybe you haven’t bought into my minimalist concept. Well, you have, but your client hasn’t. I know, I know. If you want to go really big, try a Megamenu. Due to their extra features, it’s possible to display a huge number of menu items and still have it be usable! Not only that, but many schemes will allow you to add photos, videos, all sorts of styling bits, etc. For an advanced example, hover over the largest links at the top of the Food Network site.
These are so complex that coding one from scratch would be an enormous job, so take advantage of someone else’s code for this. The Enlightenment theme actually has megamenu features built-in, and there’s a free version! If your heart is already set on a theme, you can try the Ubermenu plugin. In fact, megamenus are so complex that even with these tools, people sometimes have trouble setting them up, or the menu may have compatibility problems with other plugins. But if you have to have ginormous menus, give them a look.
Let’s all do our part to eliminate dropdowns, and tell us how you made out in the comments!