Creating drop-down menus using WP pages
Hi. I’m an intermediate WordPress designer with intermediate XHTML/CSS skills. I’ve been really struggling for a while to implement some drop-down menus for a site I’m designing using WordPress. I’ll try to describe my criteria and considerations briefly:
- Site navigation based on WordPress pages/child pages
- Horizontal drop-down menus
- Menu centered across full-width (100%) page (while menu items are ideally left-justified)
- Flexible so that adding and subtracting pages/child pages doesn’t break the menu
- I’ve been working with ALA’s Suckerfish menus (with limited success)
- I have a fondness for the Fold Page List plugin, which recently released functionality that is supposed to support drop-downs, but I’m not quite sure how… (this site apparently uses that plugin to generate navigation)
Basically, I’ve Googled and experimented and Googled and experimented and just can’t seem to get this working. If anyone has done this and can supply code, that would be just great. Any other tips or guidance would also be more highly appreciated. FWIW – the site in question is for a small environmental non-profit. Thanks in advance.
Lots of great examples (with code and css) are to be found at http://www.cssplay.co.uk. They should all be usable with the fold page plugin.
Hacceity – Thanks for the response and the link. It is definitely a step in the direction I want to go, but the menu I found that seems to do what I want requires all sorts of conditional code, i.e.:
<li class="fly"><a href="#nogo">Nikon<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
Perhaps only demonstrating my lack of skills, I just don’t see how to output that sort of code using either default wp_list_pages or the Fold Page List function… Maybe I just need to keep experimenting. Thanks again.
Check out this link
You will find a great drop-down menu for the k2 theme. I have been using it on my site and it works great.
bwcaw_greg: you don’t output that HTML code with the Fold Page List plugin. The code for the fold page plugin goes within that HTML code.
Judging by what you’ve written, you’d have a horizontal navigation bar. Each item would drop-down to reveal the children of a particular page. Is that right? Would it be kind of like the horizontal menu on my site, http://www.wildmind.org?
If so, here’s an example for one of the top-level list items on my horizontal list. This one’s actually a list of categories, but it’s the same principle:
<li><a href="/category/blogs">blog<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <?php wp_list_categories('orderby=name&child_of=8&title_li='); ?> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li>
So I have the top level list item (“/category/blogs”) hardcoded. You’d have a link to the the parent page in there, also hard-coded. No php required at this point.
In the nested unordered list I have the list_categories php code. That’s where you’d put the fold page list code. Just as I’ve done, you’d specify that the pages to display are child_of the top level link (which you’ve hard-coded).
Now this leaves you with some non-dynamic (hard coded) links going horizontally. Some purists might sneer at that. But if you have parent/child pages you’d be dumb to make changes to the parent pages (at least changes that would affect their permalinks). The important thing is that the drop-downs would be dynamic, so if you add pages, or change the page heading, or remove pages, then the menu will automatically adapt.
And you can also do what I’ve done and have horizontal list items that are not pages (I put in my list_categories, as I’ve shown), and you can even have items (like a contact list) that have no children.
Does that make sense? This will work. I’ve done it. For some reason I can no longer remember I decided just to hard code the links in m drop-downs, but at one point I was using the fold page list plugin.
I.E. still has problems with the suckerfish code even the alpha of 8 still can’t follow the standards as I understand it. Any other dhtml pull down you will likely bulk you down with too much code to be of any use and confuse the hell out of your search engines. Until IE gets with the picture I suggest just shelving pull down menus. They all look really cool, but there is no point in alienating so many users, microsoft has already don’t that enough.
cssplay’s code is very lean and cross-browser compatible. It works well on my site and the dropdown menus add virtually nothing to the size of the page.
Wow, thanks everyone for the detailed help and discussion. Haecceity in particular, I’m really looking forward to trying out your code. I’ll be back in the office tomorrow and will post about how things go or if I have further questions.
Am I understanding the above correctly, that the solutions is hard-coded?
Is there no way for IE6 to display offset or fly-out rollover navbars?
Or conversely, is there no way to add the conditional table code to WP’s files (whichever file handles the dynamic navbars….)?
- The topic ‘Creating drop-down menus using WP pages’ is closed to new replies.