UPDATE: Version 1.1.1 now available (featured children and Magento 1.6 support)
Recently we had need to create a mega menu style navigation element on a client site. The child categories from the primary navigation menu needed to be output in columns, rather than one long list. Now, Magento by default simply outputs a single
<ul> in the parent element’s
<li>, meaning a pure CSS solution would have ordered children to read left to right, rather than top to bottom.
As a quick solution, we knocked together a Magento extension that extended the core
Mage_Catalog_Block_Navigation class; more specifically, the
renderCategoriesMenuHtml() function commonly found in
app/design/frontend/(base/default)/template/catalog/navigation/top.phtml template file.
The new output wraps category children lists with a div and splits the children into separate
<ul>s of equal length.
The minimum number of items per column and the maximum number of columns can be specified but, for the time being, this is as much control as the extension provides. We will, however, be continuing development and releasing as we go.
The extension isn’t yet in Magento Connect’s marketplace, but you can download and use it free of charge on an Open Software License through GitHub. You can even fork us, if that takes your fancy?
(Tested with Magento 1.5)