WebspaceWorks Articles/News

Drop-Down Menu Support Added to Fold Page List

All previous versions of the Fold Page List plugin for Wordpress have concentrated on the need to optimise presentation of the page list by displaying only the links necessary or relevant to the current location within the site.

Full styling

Introduction of more complete styling capabilities (versions 1.1 through 1.4), that allow full styling of the navigational hierarchy, also provided the basic mechanisms for implementing css-driven drop-down menu systems for page navigation. However, without a means of disabling the folding behaviour inherent to the plugin since its introduction, a full drop-down system could not be generated without hacking around at the internals of the plugin, thus breaking forwards compatibility in the event of future updates.

Enabling drop-down menu capability

Fold Page List version 1.6 extends the partial ‘fullunfold’ of navigational sections to allow complete disabling of the folding behavior, thus generating the complete page hierarchy (to the user specified level) in exactly the same way as would be generated by the native wp_list_pages template tag. The difference, and advantage to using Fold Page List to do this is that it generates the list with full styling of the page hierarchy, allowing the need for drop-down functionality to then be handled from the stylesheet.

Turning off folding

The basic call for Fold Page List has, since v1.1, supported the use of a second optional argument:

<?php wswwpx_fold_page_list ($arglist, $fullunfold); ?>

The call structure itself remains unaltered for backwards compatibility, but changes to the internal handling of this second argument now allow for complete disabling of the folding behavior, and therefore the means to generate a page list that can be adapted to a drop-down menu system by appropriate changes to the stylesheet.

The $fullunfold argument can take any of the following values:

  • FALSE (default): Stepwise unfolding of the navigation as you navigate the site.
  • TRUE: Fully unfolds the current section (to the level set in the $arglist)
  • 2: Disables all folding, generating a full page hierarchy list to the level set in the $arglist, applying styling classes for page_item, current_page_item, page_folder and current_page_ancestor as appropriate.
  • Other numeric value: Treated the same as TRUE

Please note that this plugin will not implement drop-down menus without appropriate style rules being established for the above classes and the relationships in which they are encountered within the generated html.

Credits and examples

While such a modification has long been on the cards, I am grateful to Remco Kalf and Jen Zelazny for giving me the necessary prod to get the changes implemented. The modified functionality can be seen in use in the main navigation on Remco’s Stepping Stones for Africa website.


Webspace Works: Effective website design, development & search engine optimisation

Simply effective, web design that works!

W3Csites.com Web Standards Group: Promoting Accessibility and standards across the internet This page uses valid CSS
This page uses valid XHTML 1.0 Transitional This page works in all modern browsers Sitening perfect score Real Design Network Approved