Magento - Removing Active State From Home Page

Question

I have this code in top.phtml which displays my menu items in my Magento store:

<div class="header-nav-container"> 
<div class="header-nav"> 
<h4 class="no-display"><?php echo $this->__('Category Navigation:') ?></h4> 
<ul id="nav"> 
<li <?php if(!Mage::registry('current_category')) { echo 'class="level0 active"'; } else { echo 'class="level0"'; } ?>><a href="<?php echo $this->getUrl('') ?>"><span><?php echo $this->__('Home') ?></span></a></li> 
<?php foreach ($this->getStoreCategories() as $_category): ?> 

<?php echo $this->drawItem($_category) ?> 
<?php endforeach ?> 
<li <?php if(!Mage::registry('current_category')) { echo 'class="level0 active"'; } else { echo 'class="level0"'; } ?>><a href="<?php echo $this->getUrl('catalogsale')?>"><span><?php echo $this->__('Sale Items') ?></span></a></li> 
</ul> 

</div>

I have an extra li at the bottom which displays another page. The problem I have occurs when I click the ‘Sales Item’ page: its link becomes active but so does the home page link. How can I prevent the home page link from appearing active?

I’ve added a screenshot to show the problem: Screenshot

Answer 1

The lines for Home and Sale Items are both outputting an active category link when the current category is not defined, via the code if(!Mage::registry('current_category')). Instead of checking the category, check the current controller/action.

Here's a list of URL functions (for getting the controller/action):

http://docs.magentocommerce.com/Mage%5FCore/Mage%5FCore%5FModel%5FUrl.html

Code like this should work. It depends on whether or not catalogsale is the identifier for a custom controller or action, which depends on your setup:

if ($this->getRequest()->getControllerName() == 'catalogsale')
 // Output active class declaration

/* Otherwise, try looking at the action name. */

if ($this->getRequest()->getActionName() == 'catalogsale')
 // Output active class declaration

Answer 2

I ended up fixing this using some javascript. I added this to the new page:

<script type="text/javascript">
Event.observe(window, 'load', function() {
$$('li.active').invoke('removeClassName','active');
$$('li.newmenu').invoke('addClassName','active');
});
</script>

The new menu item should have a class of 'newmenu' for the above code to work.