Customize Magento Navigation Menu

We offer some ready made Magento module to improve navigation for your Magento store (showing as tree or exploded style, or even build unlimited menu with CMS pages)

Mega Exploded Menu
Ultimate CMS Menu builder
This is not a comprehensive example (I didn’t write out an example of editing the navigation myself … yet) – but I will point out where the files are that you need to edit the top and left navigation.
This is a tad complicated because of the use of javascript in the navigation, but it’s not too bad. It ends up being a bunch of functions which just spits out the proper HTML and javascript to get things going (and some code to retrieve the categories).
First off, the template files.
The files that have the HTML are located here:
Top.phtml controls (you guessed it) the navigation in the header area (including the drop down portions, which are controlled via javascript)
Left.phtml controls the left hand navigation, if you set your categories to be an anchor to get the left hand navigation to be used.
Now the file that pulls the categories (and has some functionality to create some of the HTML) is here:
You should review this to see the various functions and see what they do.
The functions “drawItem” and “drawOpenCategoryItem” should be of particular interest, since they create some HTML to output.
Hope this helps someone get started creating a custom navigation!

Leave a Reply

Your email address will not be published.

four × 3 =

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>