This post shows you how to render the markup needed for an animated drop down menu in Wordpress based on your nested parent/child page hierarchy using PHP.
OK, first let's see an example in action of what exactly we are trying to do here. The way wp_list_pages() renders the menu list items needs to be rewritten in order to power the structure of this menu:
Click on the link above and interact with the menu. That should do some pretty interesting things. It has a nice info area when you mouse over the menu items.
Now the need arises to be able to manage the content of this menu without having to edit the code in the template. The wp_list_pages() template tag has some pretty nice parameters to work with, but in this case, it really isn't robust enough to render the necessary markup for this menu as is. So I had to write a script to explode wp_list_pages and check each menu item for possible submenu items based on the page structure define by the administrator in the wordpress administrative panel:
<div id="quicklinks">
<ul class="kwicks horizontal" >
<?php $toppages = wp_list_pages('echo=0&title_li=&depth=1');
$menuitem = explode('<li class',$toppages);
$n = count($menuitem);
for ($i = 1;$i<$n;$i++){
preg_match('/page-item-[0-9]*/', $menuitem[$i],$id);
$id2 = str_replace("page-item-","",$id);
$x = $id2[0];
$submenu = wp_list_pages('echo=0&title_li=&depth=2&child_of='.$x);
echo '<li id="kwick_'.$i.'">
<div class="wrapper">
<div class="col1"><h3><li class'.$menuitem[$i].'</h3>
<ul class="menu2">'.$submenu.'</ul></div>
<div id="info_'.$x.'" class="col2" style="display: none;"> This is an info area. </div>
</div>
</li>';
}
?>
</ul>
</div>
The script basically takes the list of pages, explodes it into pieces delineated by the <li> tag, counts the number of pieces, then loops through each item, checking it to see if there are subpages for that menu item by determining the page ID, running wp_list_pages() again and rendering those subpages underneath - all with the proper markup needed for the menu to work.
This was a bit of a challenge, but a great exercise in PHP. Using the script above could likely be adapted and improved to whatever you would need for a unique menu of your own powered by the Wordpress paging system.
I'm sure there are plugins for drop downs - sometimes it's more rewarding to build it yourself.


