Magento 1.9 – Add ‘Active’ Class to Top Menu Category Item

categorymagento-1.9menunavigation

Within topmenu.phtml I am removing the default so that I can easier create a custom menu with my own classes (for implementation into Foundation CSS Framework using Top Bar).

How would I add a custom "active" class to the parent <li> if a child / descendent category of the selected is currently active?

I'm using the following code to generate the menu:

<ul>
  <?php
       $obj = new Mage_Catalog_Block_Navigation();
       $storeCategories = $obj->getStoreCategories();
       Mage::registry('current_category') ? $currentCategoryId = Mage::registry('current_category')->getId() : $currentCategoryId='';
       foreach ($storeCategories as $_category):
   ?>
           <li class="<!--active class here if child is current -->">
               <a href="#"><?php echo $_category->getName(); ?></a>
               <?php $categoryChildren = $_category->getChildren(); ?>
               <?php if($categoryChildren->count()) : ?>
                   <ul class="dropdown">
                       <?php foreach($categoryChildren as $_categoryChild) : ?>
                           <?php $_categoryChildModel = Mage::getModel('catalog/category')->load($_categoryChild->getId());?>
                           <?php $categoryGrandchildren=$_categoryChild->getChildren(); ?>
                           <li>
                               <?php
                                   $currentCategoryId===$_categoryChild->getId() ? $bold="style=\"font-weight:bold\"" : $bold='';
                                   echo '&emsp;' . '<a href="' . $_categoryChildModel->getUrl() . '"' . $bold . '>' .  $_categoryChild->getName() . '</a>';
                               ?>
                           </li>
                           <?php if($categoryGrandchildren->count()) : ?>
                               <?php foreach($categoryGrandchildren as $_categoryGrandchild) : ?>
                                   <?php $_categoryGrandchildModel = Mage::getModel('catalog/category')->load($_categoryGrandchild->getId());?>
                                   <li>
                                       <?php
                                           $currentCategoryId===$_categoryChild->getId() ? $bold="style=\"font-weight:bold\"" : $bold='';
                                           echo '&emsp;&emsp;' . '<a href="' . $_categoryGrandchildModel->getUrl() . '"' . $bold . '>' .  $_categoryGrandchild->getName() . '(' . $_categoryGrandchildModel->getProductCount() . ')</a>';
                                       ?>
                                   </li>
                               <?php endforeach; ?>
                           <?php endif; ?>
                       <?php endforeach; ?>
                   </ul>
               <?php endif; ?>
           </li>
       <?php endforeach ?>

   </ul>

Best Answer

Change

<li class="<!--active class here if child is current -->">

To

<li<?php echo in_array($_category->getId(), Mage::registry('current_category')->getPathIds()) ? ' class="custom-active-class"' : '' ?>>

EDIT: You need to add the category id to the cache key to make it work. Otherwise this solution wouldn't work with block caching enabled.

Related Topic