This is the nice thing about WordPress—it’s all “dynamic”. Once you install WordPress and design a great theme for it, anyone with the right level of administrative capability can log into the Administration Panel and add, edit, or delete content and menu items. But generally, when people ask for “dynamic menus”, what they really want are those appearing and disappearing drop-down menus which, I believe, they like because it quickly gives a site a very “busy” feel.
I must add my own disclaimer—I don’t like dropdowns. Before you get on to my case, I will say it’s not that they’re “wrong” or “bad”; they just don’t meet my own aesthetic standards and I personally find them non-user friendly. I’d prefer to see a menu system that, if subsections are required, displays them somewhere consistently on the page, either by having a vertical navigation expand to display subsections underneath, or showing additional subjections in a set location on the page if a horizontal menu is used.
I like to be able to look around and say, “OK, I’m in the New Items | Cool Drink section and I can also check out Red Dinksand Retro Dinks within this section”. Having to constantly go back up to the menu and drop-down the options to remind myself of what’s available and what my next move might be, is annoying. Still haven’t convinced you not to use drop-downs? OK, read on.
If it becomes apparent that any percentage of the site’s target users will be using older browsers or have disabilities that prevent them from using a mouse and will limit them to tabbing through content, you must consider not using drop-down menus.
This method is wonderful because it takes valid, semantically accurate, unordered lists (WordPress’ favorite!), and using almost pure CSS, creates dropdowns. The drop-down menus are not tab accessible, but they will simply display as a single, clear unordered list to older browsers that don’t support the required CSS.
If you haven’t heard of or worked with the Suckerfish method, I’m going to recommend you to go online (right now!) and read Dan and Patrick’s article in detail (http://alistapart.com/articles/dropdowns).
I also suggest you play around with the sample code provided in these articles so that you understand exactly how it works. Go on, and read it. When you get back, I’ll review how to apply this method to your WordPress theme.
DIY SuckerFish menus in WordPress
All done? Great! As you can see, the essential part of this effect is getting your menu items to show up as unordered lists with sub unordered lists. Once you do that, the rest of the magic can be easily handled by finessing the CSS that Patrick and Dan suggest into your theme’s CSS and placing the DOM script in your theme’s header tag(s), in your header.php and/or index.php template files. Seriously, that’s it!
The really good news is that WordPress already outputs your content’s pages and their subpages using unordered lists. Right-click on the page links in Firefox to View Selected Source and check that the DOM inspector shows us that the menu is, in fact, being displayed using an unordered list.
Now you can go into your WordPress Administration panel and add as many pages and subpages as you’d like (Administration | Page | Add New). You’ll use the Page Parent tab on the right to assign your subpages to their parent.
If you installed the pageMash plugin, it’s even easier! You can drag-and-drop your created pages into any configuration you’d like. Just be sure to hit the Update button when you’re done.
Once you’ve added subpages to a page, you’ll be able to use the DOM Source of Selection viewer to see that your menu is displayed with unordered lists and sublists.