Skip to content

Create custom Catalog navigation menus in Magento…

Out of the box, Magento will happily give you a quite nice navigation menus of your Catalog Categories, including drop-downs for sub-categories.

You also get a number of utility classes added to the individual list items, such as ‘level0 nav-6 level-top’ which enable you to do some tweaking. However the ‘nav-6’ class unfortunately just refers to the position in the menu; so if you rearrange your Catalog categories, the classes changes. This makes it unsuitable for adding Category specific styles to your main navigation. So what can you do if you want to be able to add specific styles to individual Categories?

If you look in the method Mage_Catalog_Block_Navigation::_renderCategoryMenuItemHtml() you’ll find the code that actually renders the menu item. You’ll also find an array called $classes defined. The code below will add cat-13 to the menu item representing the Category with an ID of 13. Obviously I don’t advocate editing the core file, so make your own /local or override it in your own module…


$classes[] = "cat-" . $category->getEntityId();

You could easily extend this methodology to enable the Store Admin to add custom classes or css to the navigation menu by adding a custom field in the Category Admin interface. But for now your front-end developer can now easily target individual list items as they see fit…

Looking for a freelance Magento developer? Give Sweet-Apple a buzz on 01380 830224 -we’d love to help you get your e-commerce website started…

This entry was posted in Magento, Uncategorized, Web Development and tagged , , , . Bookmark the permalink.

Comments

Sorry, comments are closed on this page.