Journal

Free Magento Extension : Columnised Navigation

Free Magento Extension : Columnised Navigation

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?

Download Magento Columnised Navigation extension

(Tested with Magento 1.5)

Your Comments

  1. Thank you for sharing this extension :)
    I have installed it, everthing seems to work fine, i have the new fields in the category form.
    But i don’t really know how it works, i have set to “yes” both new fields in all categories, but i can’t see any changes in the menu … So maybe i did something wrong ?
    Thank you for your help.

    Posted on

    Reply | Permalink to this comment

    • Hi,

      Thanks for the feedback on the extension. It sounds like you’re pulling the development version, which is my fault for pushing to the wrong branch (we’re still in the process of moving to Git). Version 1.0, which you can download here, doesn’t include the database modifications and simply creates a set of columns. The next release (in the next day or so) will have the ability to add an additional column of featured categories.

      Again, apologies for the Git hiccup, and cheers for the interest,
      Dajve

      Posted on

      Permalink to this comment

  2. I have tried versions 1.1.1 and 1.1.2 ( mistake in mysql file name for this version ) and finally came back to v 1.0 ( the link in your comment ) but still can make it to work.
    I have added a Mage::log(‘test’); in _renderCategoryMenuItemHtml() but is seems this function is never called. I’m kinda lost ^^
    Thank you

    Posted on

    Reply | Permalink to this comment

  3. i liked this extension. It will be good for lot of users.

    Thanks

    Posted on

    Reply | Permalink to this comment

  4. I like this extension and i found other will helpful : http://www.apptha.com/magento/magento-extensions

    Posted on

    Reply | Permalink to this comment

  5. Does this work on 1.6.1 before i try it :) and keep up the good work

    Posted on

    Reply | Permalink to this comment

    • Hi Gloopy,

      There shouldn’t be any problems with this extension on v1.6.1, though if you have other extensions installed which interact / extend the navigation block class, there may be a conflict.
      As with any extension, we would recommend backing up your files and database before installing.

      Thanks for the interest,
      Dajve

      Posted on

      Permalink to this comment

  6. Hi Dajve, i think this solution would help me a lot but can u tell me how to install it? I tried to install it via magento connect and it doesn’t even start the install.

    What do i have to do to get it running?

    Thanks,
    Chris.

    Posted on

    Reply | Permalink to this comment

    • Hi Chris,

      To install the extension, simply download the latest version (1.1.2 at the moment), copy the app folder into your Magento root and clear your Magento cache (note, you will need to recompile if you have compilation enabled).

      We haven’t added the code to Magento Connect as yet, so you won’t be able to install that way, I’m afraid.

      As always, remember to back-up your files and database before installing to be on the safe side!

      Thanks for the interest,
      Dajve

      Posted on

      Permalink to this comment

  7. I have tried your menu but I am using a template and no matter how i try I cannot get it to work, it just seems to disable the drop downs alltogether, I am missing something but not sure what.

    Posted on

    Reply | Permalink to this comment

    • Hi Andy,

      As this is just a quick “scratch an itch” extension to split the navigation markup into chunks which can be managed more easily, rather than an out-of-the-box solutions, it doesn’t contain any CSS with which to style the resulting HTML. Unfortunately, that means you will probably need to get down and dirty with your theme’s CSS (and possibly JavaScript) to make it play nicely.
      You can see the extension in action at http://www.sunglassesuk.com, if you wanted to check its CSS for inspiration?

      Cheers,
      Dajve

      Posted on

      Permalink to this comment

Leave Your Thoughts